/* ===================== FONTES LOCAIS (Inter, servidas pelo próprio site) ===================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/inter-latin-400-normal.woff2') format('woff2'); } /* Inter normal */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fontes/inter-latin-500-normal.woff2') format('woff2'); } /* Inter média */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fontes/inter-latin-600-normal.woff2') format('woff2'); } /* Inter semi-negrito */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fontes/inter-latin-700-normal.woff2') format('woff2'); } /* Inter negrito */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fontes/inter-latin-800-normal.woff2') format('woff2'); } /* Inter extra-negrito */

/* ===================== VARIÁVEIS E BASE ===================== */
:root { --corLaranja: #F7871F; --corLaranjaEscuro: #E06A00; --corLaranjaClaro: #FFEDD5; --corVerde: #14B8A6; --corVerdeClaro: #CCFBF1; } /* cores da marca */
:root { --corTexto: #0F172A; --corTextoSuave: #475569; --corTextoFraco: #64748B; --corBorda: #E2E8F0; --corFundo: #F8FAFC; --corFundoAlternado: #F1F5F9; --corNoite: #0B1220; } /* cores neutras */
:root { --raioCartao: 18px; --sombraCartao: 0 14px 34px rgba(15, 23, 42, .08); --sombraForte: 0 30px 60px rgba(15, 23, 42, .18); --alturaCabecalho: 82px; } /* medidas comuns */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* reinicia margens e caixas */
html { scroll-behavior: smooth; scroll-padding-top: var(--alturaCabecalho); } /* rolagem suave e compensação do cabeçalho fixo */
body { font-family: 'Inter', system-ui, sans-serif; color: var(--corTexto); background: var(--corFundo); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* tipografia base */
img { max-width: 100%; display: block; } /* imagens nunca saem do contentor */
a { color: inherit; text-decoration: none; } /* ligações sem sublinhado */
ul, ol { list-style: none; } /* listas sem marcadores por omissão */
button, input, select, textarea { font: inherit; color: inherit; } /* formulários herdam a fonte */
:focus-visible { outline: 3px solid var(--corLaranja); outline-offset: 3px; } /* contorno visível ao navegar por teclado */
.contentor { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* largura máxima do conteúdo */

/* ===================== BOTÕES ===================== */
.botaoLaranja, .botaoContorno, .botaoBranco, .botaoContornoBranco { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; } /* forma comum dos botões */
.botaoLaranja { background: var(--corLaranja); color: #fff; box-shadow: 0 8px 20px rgba(247, 135, 31, .3); } /* botão principal laranja */
.botaoLaranja:hover { background: var(--corLaranjaEscuro); transform: translateY(-2px); } /* efeito ao passar o rato */
.botaoContorno { background: #fff; border-color: #CBD5E1; color: var(--corTexto); } /* botão secundário com contorno */
.botaoContorno:hover { border-color: var(--corLaranja); color: var(--corLaranjaEscuro); transform: translateY(-2px); } /* efeito ao passar o rato */
.botaoBranco { background: #fff; color: var(--corLaranjaEscuro); } /* botão branco sobre fundo laranja */
.botaoContornoBranco { border-color: rgba(255, 255, 255, .7); color: #fff; } /* botão contorno branco */
.botaoBranco:hover, .botaoContornoBranco:hover { transform: translateY(-2px); } /* efeito ao passar o rato */
.grupoBotoes { display: flex; flex-wrap: wrap; gap: 14px; } /* alinha botões lado a lado */

/* ===================== CABEÇALHO ===================== */
.cabecalhoSite { position: fixed; inset: 0 0 auto 0; height: var(--alturaCabecalho); background: transparent; z-index: 50; transition: background .25s, box-shadow .25s; } /* barra fixa, transparente sobre a capa */
.cabecalhoSite.comSombra, .cabecalhoSite.menuAberto { background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--corBorda), 0 10px 30px rgba(15, 23, 42, .06); } /* sombra depois de rolar */
.cabecalhoInterior { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* distribui logótipo, menu e botão */
.logotipoImagem { height: 46px; width: auto; } /* tamanho do logótipo */
.logotipoEscuro { display: none; } /* logótipo escuro só aparece depois de rolar */
.cabecalhoSite.comSombra .logotipoClaro, .cabecalhoSite.menuAberto .logotipoClaro { display: none; } /* esconde o branco no cabeçalho branco */
.cabecalhoSite.comSombra .logotipoEscuro, .cabecalhoSite.menuAberto .logotipoEscuro { display: block; } /* mostra o escuro no cabeçalho branco */
.accoesCabecalho { display: flex; align-items: center; gap: 12px; } /* botões do lado direito */
.botaoTelefoneCabecalho { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 1.5px solid var(--corLaranja); color: #fff; font-weight: 600; font-size: 14px; transition: background .2s, color .2s; } /* botão WhatsApp com contorno laranja */
.botaoTelefoneCabecalho:hover { background: var(--corLaranja); color: #fff; } /* efeito ao passar o rato */
.botaoOrcamentoCabecalho { padding: 12px 20px; font-size: 14px; } /* botão de orçamento mais compacto */
.cabecalhoSite.comSombra .botaoTelefoneCabecalho { color: var(--corTexto); } /* texto escuro no cabeçalho branco */
.cabecalhoSite.comSombra .botaoTelefoneCabecalho:hover { color: #fff; } /* texto branco ao passar o rato */
.menuPrincipal { display: flex; gap: 30px; } /* menu horizontal */
.ligacaoMenu { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .88); position: relative; padding: 6px 0; transition: color .2s; } /* ligações do menu */
.ligacaoMenu::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--corLaranja); transition: width .25s; } /* traço por baixo */
.ligacaoMenu:hover, .ligacaoMenu.activa { color: var(--corLaranja); } /* cor da ligação activa */
.cabecalhoSite.comSombra .ligacaoMenu { color: var(--corTextoSuave); } /* ligações escuras no cabeçalho branco */
.cabecalhoSite.comSombra .ligacaoMenu:hover, .cabecalhoSite.comSombra .ligacaoMenu.activa { color: var(--corLaranjaEscuro); } /* activa no cabeçalho branco */
.ligacaoMenu.activa::after { width: 100%; } /* traço visível na ligação activa */
.botaoMenuTelemovel { display: none; } /* botão de ligar só aparece no menu móvel */
.botaoMenuMovel { display: none; width: 46px; height: 46px; margin-right: -8px; border-radius: 10px; background: none; border: 0; font-size: 30px; cursor: pointer; line-height: 1; color: #fff; } /* hambúrguer (46x46, fácil de tocar) escondido no computador */
.cabecalhoSite.comSombra .botaoMenuMovel, .cabecalhoSite.menuAberto .botaoMenuMovel { color: var(--corTexto); } /* hambúrguer escuro no cabeçalho branco */

/* ===================== CAPA ===================== */
.seccaoCapa { position: relative; min-height: min(100vh, 860px); display: flex; align-items: flex-end; padding: calc(var(--alturaCabecalho) + 60px) 0 48px; color: #fff; background: linear-gradient(90deg, rgba(4, 8, 20, .94) 0%, rgba(4, 8, 20, .78) 38%, rgba(4, 8, 20, .15) 72%, rgba(4, 8, 20, 0) 100%), linear-gradient(0deg, rgba(4, 8, 20, .85) 0%, rgba(4, 8, 20, 0) 35%), url('/img/fundos/cidade-rede.webp') center right / cover no-repeat, #070C1C; } /* fundo de cidade nocturna com véu escuro à esquerda */
.seccaoCapa .contentor { display: grid; gap: 70px; } /* texto em cima, barra de soluções em baixo */
.textoCapa { max-width: 640px; } /* largura do bloco de texto */
.seccaoCapa .etiquetaSeccao { color: var(--corLaranja); } /* etiqueta laranja viva sobre o escuro */
.descricaoCapa { font-size: 18px; color: rgba(255, 255, 255, .82); max-width: 580px; margin-bottom: 32px; } /* descrição clara */
.barraSolucoes { display: grid; grid-template-columns: repeat(6, 1fr); background: rgba(10, 16, 32, .82); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 10px; } /* barra translúcida com as seis soluções */
.itemSolucao { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 12px; font-weight: 600; font-size: 16px; position: relative; transition: background .2s; } /* cada solução */
.itemSolucao + .itemSolucao::before { content: ''; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: rgba(255, 255, 255, .12); } /* separador vertical */
.itemSolucao i { font-size: 30px; color: var(--corLaranja); transition: transform .2s; } /* ícone laranja */
.itemSolucao:hover { background: rgba(247, 135, 31, .12); } /* realce ao passar o rato */
.itemSolucao:hover i { transform: translateY(-3px); } /* ícone sobe ligeiramente */
.etiquetaSeccao { display: inline-flex; align-items: center; gap: 8px; color: var(--corLaranjaEscuro); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; } /* etiqueta laranja */
.tituloCapa { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -1.5px; margin: 18px 0; } /* título principal adaptável */
.tituloCapa em { font-style: normal; color: var(--corLaranjaEscuro); } /* destaque laranja no título */

/* ===================== FAIXA DE CONFIANÇA ===================== */
.faixaConfianca { background: #fff; border-block: 1px solid var(--corBorda); padding: 26px 0; } /* faixa branca */
.grelhaConfianca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* quatro garantias */
.itemConfianca { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--corTextoFraco); } /* cada garantia */
.itemConfianca i { font-size: 26px; color: var(--corLaranja); } /* ícone da garantia */
.itemConfianca b { display: block; color: var(--corTexto); font-size: 15px; } /* título da garantia */

/* ===================== SECÇÕES GERAIS ===================== */
.seccao { padding: 96px 0; } /* espaço vertical das secções */
.seccaoAlternada { background: var(--corFundoAlternado); } /* fundo alternado */
.cabecalhoSeccao { text-align: center; max-width: 720px; margin: 0 auto 52px; } /* título centrado */
.tituloSeccao { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -1px; margin: 12px 0; } /* título de secção */
.subtituloSeccao { color: var(--corTextoSuave); font-size: 17px; } /* subtítulo de secção */

/* ===================== SERVIÇOS ===================== */
.grelhaServicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* três colunas de serviços */
.cartaoServico { background: #fff; border-radius: var(--raioCartao); overflow: hidden; box-shadow: var(--sombraCartao); border: 1px solid var(--corBorda); transition: transform .25s, box-shadow .25s; } /* cartão de serviço */
.cartaoServico:hover { transform: translateY(-6px); box-shadow: var(--sombraForte); } /* efeito ao passar o rato */
.cartaoServico img { width: 100%; height: auto; aspect-ratio: 600 / 280; object-fit: cover; } /* ilustração do serviço */
.corpoServico { padding: 22px 24px 26px; } /* texto do serviço */
.corpoServico h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 8px; } /* título do serviço */
.corpoServico h3 i { color: var(--corLaranja); } /* ícone do serviço */
.corpoServico p { color: var(--corTextoSuave); font-size: 15px; margin-bottom: 14px; } /* descrição do serviço */
.corpoServico li { position: relative; padding-left: 24px; font-size: 14px; font-weight: 500; color: #334155; margin-bottom: 6px; } /* pontos do serviço */
.corpoServico li::before { content: '\F26A'; font-family: 'bootstrap-icons'; position: absolute; left: 0; color: var(--corVerde); } /* visto verde antes de cada ponto */

.cartaoServicoLargo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; } /* consumíveis: cartão em largura total */
.cartaoServicoLargo img { height: 100%; object-fit: cover; } /* ilustração ocupa a altura do cartão */
.listaDuasColunas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } /* pontos em duas colunas */
@media (max-width: 860px) { .cartaoServicoLargo { grid-template-columns: 1fr; } .cartaoServicoLargo img { height: auto; } } /* no telemóvel volta a ser um cartão normal */

/* ===================== COMO TRABALHAMOS ===================== */
.grelhaPassos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: passo; } /* quatro passos */
.cartaoPasso { background: #fff; border-radius: var(--raioCartao); padding: 28px 24px; box-shadow: var(--sombraCartao); position: relative; } /* cartão de passo */
.numeroPasso { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--corLaranjaClaro); color: var(--corLaranjaEscuro); font-weight: 800; font-size: 20px; margin-bottom: 16px; } /* número do passo */
.cartaoPasso h3 { font-size: 18px; margin-bottom: 6px; } /* título do passo */
.cartaoPasso p { font-size: 15px; color: var(--corTextoSuave); } /* texto do passo */

/* ===================== PRODUTOS ===================== */
.grelhaProdutos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* dois produtos */
.cartaoProduto { background: #fff; border: 1px solid var(--corBorda); border-radius: 22px; padding: 34px; box-shadow: var(--sombraCartao); position: relative; overflow: hidden; } /* cartão de produto */
.cartaoProduto::before { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--corLaranjaClaro); } /* círculo decorativo */
.categoriaProduto { position: relative; display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--corLaranjaEscuro); } /* categoria do produto */
.cartaoProduto h3 { position: relative; font-size: 28px; font-weight: 800; margin: 8px 0 10px; } /* nome do produto */
.cartaoProduto p { color: var(--corTextoSuave); margin-bottom: 18px; } /* descrição do produto */
.etiquetasProduto { display: flex; flex-wrap: wrap; gap: 8px; } /* etiquetas do produto */
.etiquetasProduto span { background: var(--corFundoAlternado); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #334155; } /* cada etiqueta */

/* ===================== SOBRE ===================== */
.grelhaSobre { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } /* texto e valores */
.listaValores { display: grid; gap: 16px; } /* lista de valores */
.cartaoValor { display: flex; gap: 16px; background: #fff; border-radius: var(--raioCartao); padding: 22px; box-shadow: var(--sombraCartao); } /* cartão de valor */
.cartaoValor > i { flex: 0 0 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--corLaranjaClaro); color: var(--corLaranjaEscuro); font-size: 22px; } /* ícone do valor */
.cartaoValor h3 { font-size: 17px; } /* título do valor */
.cartaoValor p { font-size: 15px; color: var(--corTextoSuave); } /* texto do valor */

/* ===================== CLIENTES ===================== */
.seccaoClientes { padding-bottom: 72px; } /* espaço inferior menor */
.faixaLogotipos { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } /* esbate as pontas da faixa */
.pistaLogotipos { display: flex; gap: 28px; width: max-content; animation: deslizarLogotipos 30s linear infinite; } /* pista em movimento */
.faixaLogotipos:hover .pistaLogotipos { animation-play-state: paused; } /* pára ao passar o rato */
.logotipoCliente { flex: 0 0 auto; width: 190px; height: 96px; background: #fff; border: 1px solid var(--corBorda); border-radius: 14px; display: grid; place-items: center; padding: 14px; } /* caixa de cada logótipo */
.logotipoCliente img { max-height: 64px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; } /* logótipo a cinzento */
.logotipoCliente:hover img { filter: none; opacity: 1; } /* cor ao passar o rato */
@keyframes deslizarLogotipos { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* desliza metade (a pista está duplicada) */

/* ===================== CHAMADA À ACÇÃO ===================== */
.faixaChamada { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; background: var(--corNoite); color: #fff; border-radius: 24px; padding: 52px 56px; box-shadow: 0 30px 60px rgba(11, 18, 32, .28); } /* caixa escura */
.faixaChamada::before { content: ''; position: absolute; inset: 0; background: url('/img/fundos/cidade-rede.webp') right 30% / cover no-repeat; opacity: .55; } /* cidade em rede ao fundo (igual à capa) */
.faixaChamada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--corNoite) 0%, rgba(11, 18, 32, .92) 45%, rgba(11, 18, 32, .35) 100%); } /* escurece o lado do texto para leitura */
.faixaChamada > * { position: relative; z-index: 1; } /* conteúdo por cima do fundo */
.faixaChamada h2 { font-size: 30px; font-weight: 800; line-height: 1.15; } /* título da chamada */
.faixaChamada p { color: #C3CCDB; margin-top: 10px; font-size: 16.5px; max-width: 520px; } /* texto da chamada */
.factosChamada { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; font-size: 14.5px; color: #DCE3EF; } /* contactos directos */
.factosChamada a, .factosChamada span { display: inline-flex; align-items: center; gap: 8px; } /* ícone + texto */
.factosChamada a:hover { color: #fff; } /* realce ao passar o rato */
.factosChamada i { color: var(--corLaranja); } /* ícones a laranja */
.faixaChamada .grupoBotoes { display: flex; flex-direction: column; gap: 12px; min-width: 240px; } /* botões empilhados */
.faixaChamada .grupoBotoes a { justify-content: center; } /* texto centrado nos botões */
@media (max-width: 860px) { .faixaChamada { grid-template-columns: 1fr; padding: 36px 26px; } .faixaChamada .grupoBotoes { min-width: 0; } } /* uma coluna em ecrãs médios/pequenos */

/* ===================== CONTACTO ===================== */
.grelhaContacto { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; } /* formulário e informações */
.formularioContacto { margin-top: 28px; display: grid; gap: 16px; } /* formulário */
.grelhaCampos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* campos em duas colunas */
.campoFormulario { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #334155; } /* rótulo e campo */
.campoFormulario input, .campoFormulario select, .campoFormulario textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--corBorda); border-radius: 10px; background: #fff; font-weight: 400; font-size: 15px; transition: border-color .2s, box-shadow .2s; } /* aspecto dos campos */
.campoFormulario input:focus, .campoFormulario select:focus, .campoFormulario textarea:focus { outline: none; border-color: var(--corLaranja); box-shadow: 0 0 0 4px rgba(247, 135, 31, .15); } /* campo seleccionado */
.campoFormulario .campoInvalido { border-color: #DC2626; } /* campo com erro */
.grupoAreas { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } /* grupo das áreas de interesse */
.grupoAreas legend { font-size: 14px; font-weight: 600; color: #334155; margin-bottom: 8px; } /* título do grupo */
.listaOpcoesArea { display: flex; flex-wrap: wrap; gap: 8px; } /* caixas lado a lado */
.opcaoArea { position: relative; cursor: pointer; } /* cada opção */
.opcaoArea input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* caixa nativa escondida (continua acessível ao teclado) */
.opcaoArea span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--corBorda); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 500; transition: border-color .2s, background .2s; } /* aspecto da opção */
.opcaoArea span::before { content: ''; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #94A3B8; background: #fff; flex: none; } /* quadrado */
.opcaoArea input:checked + span { border-color: var(--corLaranja); background: #FFF4E8; color: #9A4A00; } /* opção marcada */
.opcaoArea input:checked + span::before { background: var(--corLaranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--corLaranja); } /* visto */
.opcaoArea input:focus-visible + span { outline: 3px solid var(--corLaranja); outline-offset: 2px; } /* foco por teclado */
.campoArmadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* armadilha anti-robô fora do ecrã */
.notaPrivacidade { font-size: 13px; color: var(--corTextoFraco); } /* nota de privacidade */
.notaPrivacidade a { text-decoration: underline; } /* ligação */
.formularioContacto button[disabled] { opacity: .6; cursor: wait; } /* botão enquanto envia */
.mensagemFormulario { min-height: 22px; font-size: 14px; font-weight: 600; } /* espaço para avisos */
.mensagemFormulario.erro { color: #DC2626; } /* aviso de erro */
.mensagemFormulario.sucesso { color: #0F766E; } /* aviso de sucesso */
.listaContactos { display: grid; gap: 16px; margin-top: 8px; } /* lista de contactos */
.cartaoContacto { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--corBorda); border-radius: var(--raioCartao); padding: 20px; font-size: 15px; color: var(--corTextoSuave); transition: border-color .2s, transform .2s; } /* cartão de contacto */
a.cartaoContacto:hover { border-color: var(--corLaranja); transform: translateX(4px); } /* efeito nos contactos clicáveis */
.cartaoContacto > i { flex: 0 0 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--corLaranjaClaro); color: var(--corLaranjaEscuro); font-size: 22px; } /* ícone do contacto */
.cartaoContacto b { display: block; color: var(--corTexto); } /* título do contacto */

/* ===================== RODAPÉ ===================== */
.rodapeSite { background: var(--corNoite); color: #94A3B8; padding: 72px 0 0; margin-top: 40px; } /* rodapé escuro */
.grelhaRodape { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; } /* quatro colunas */
.grelhaRodape h4 { color: #fff; font-size: 15px; margin-bottom: 14px; } /* título das colunas */
.grelhaRodape a, .grelhaRodape span { display: block; font-size: 14px; margin-bottom: 9px; transition: color .2s; } /* ligações do rodapé */
.grelhaRodape a:hover { color: var(--corLaranja); } /* cor ao passar o rato */
.logotipoRodape { height: 46px; width: auto; margin-bottom: 16px; } /* logótipo branco */
.redesSociais { display: flex; gap: 10px; margin-top: 18px; } /* ícones das redes sociais */
.redesSociais a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); font-size: 18px; color: #fff; } /* cada rede social */
.redesSociais a:hover { background: var(--corLaranja); color: #fff; } /* rede social ao passar o rato */
.linhaDireitos { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 24px; font-size: 13px; text-align: center; } /* linha dos direitos */

/* ===================== BOTÕES FLUTUANTES ===================== */
.botaoWhatsappFlutuante { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: #1FAF55; color: #fff; display: grid; place-items: center; font-size: 24px; box-shadow: 0 6px 16px rgba(15, 23, 42, .18); z-index: 40; transition: transform .2s; } /* botão WhatsApp discreto (52 px) */
.botaoWhatsappFlutuante:hover { transform: scale(1.08); } /* cresce ao passar o rato */
.botaoVoltarTopo { position: fixed; right: 25px; bottom: 84px; width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--corTexto); color: #fff; font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 40; } /* botão voltar ao topo (escondido) */
.botaoVoltarTopo.visivel { opacity: 1; pointer-events: auto; } /* aparece depois de rolar */

/* ===================== ACESSIBILIDADE ===================== */
.saltarConteudo { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--corLaranja); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; } /* atalho escondido */
.saltarConteudo:focus { top: 12px; } /* aparece ao usar o teclado */
.ligacaoSaberMais { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--corLaranjaEscuro); min-height: 44px; } /* ligação para a página do serviço */
.ligacaoSaberMais i { transition: transform .2s; } /* seta */
.ligacaoSaberMais:hover i { transform: translateX(4px); } /* seta avança */

/* ===================== PÁGINAS INTERNAS ===================== */
.seccaoCapaInterna { padding: calc(var(--alturaCabecalho) + 56px) 0 64px; color: #fff; background: linear-gradient(90deg, rgba(4, 8, 20, .95) 0%, rgba(4, 8, 20, .82) 50%, rgba(4, 8, 20, .35) 100%), url('/img/fundos/cidade-rede.webp') center right / cover no-repeat, #070C1C; } /* abertura escura das páginas internas */
.seccaoCapaCurta { padding-bottom: 40px; } /* abertura mais baixa (privacidade, 404) */
.seccaoCapaInterna .etiquetaSeccao { color: var(--corLaranja); } /* etiqueta laranja viva */
.seccaoCapaInterna .descricaoCapa { max-width: 680px; } /* largura do texto */
.tituloCapaInterna { font-size: clamp(30px, 4.4vw, 48px); max-width: 820px; } /* título mais pequeno que o da página inicial */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .7); margin-bottom: 20px; } /* caminho Início > Serviços */
.migalhas a:hover { color: var(--corLaranja); } /* realce */
.migalhas i { font-size: 11px; } /* separador */
.grelhaServicoDetalhe { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; } /* ilustração e lista */
.ilustracaoServico { position: sticky; top: calc(var(--alturaCabecalho) + 24px); } /* ilustração acompanha a leitura */
.ilustracaoServico img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--sombraForte); } /* ilustração */
.grelhaInclui { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } /* blocos em duas colunas */
.cartaoInclui { display: flex; gap: 14px; background: #fff; border: 1px solid var(--corBorda); border-radius: 16px; padding: 18px; } /* bloco */
.cartaoInclui > i { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--corLaranjaClaro); color: var(--corLaranjaEscuro); font-size: 20px; } /* ícone do bloco */
.cartaoInclui h3 { font-size: 16px; margin-bottom: 4px; } /* título do bloco */
.cartaoInclui p { font-size: 14px; color: var(--corTextoSuave); } /* texto do bloco */
.listaSectores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } /* sectores */
.listaSectores span { background: #fff; border: 1px solid var(--corBorda); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: #334155; } /* cada sector */
.contentorEstreito { max-width: 860px; } /* largura confortável para ler */
.listaPerguntas { display: grid; gap: 12px; } /* perguntas */
.perguntaFrequente { background: #fff; border: 1px solid var(--corBorda); border-radius: 14px; padding: 0 20px; } /* pergunta */
.perguntaFrequente summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-weight: 700; position: relative; min-height: 44px; } /* pergunta clicável */
.perguntaFrequente summary::-webkit-details-marker { display: none; } /* esconde o triângulo do Safari */
.perguntaFrequente summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 24px; font-weight: 400; color: var(--corLaranja); } /* sinal + */
.perguntaFrequente[open] summary::after { content: '−'; } /* sinal − quando aberta */
.perguntaFrequente p { padding: 0 0 18px; color: var(--corTextoSuave); } /* resposta */
.grelhaOutrosServicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* outros serviços */
.cartaoOutroServico { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--corBorda); border-radius: 14px; padding: 16px 18px; font-weight: 600; transition: border-color .2s, transform .2s; } /* ligação */
.cartaoOutroServico:hover { border-color: var(--corLaranja); transform: translateY(-3px); } /* realce */
.cartaoOutroServico i:first-child { color: var(--corLaranja); font-size: 20px; } /* ícone */
.cartaoOutroServico span { flex: 1; } /* nome ocupa o espaço */
.textoLongo h2 { font-size: 22px; margin: 32px 0 8px; } /* títulos do texto */
.textoLongo p, .textoLongo li { color: var(--corTextoSuave); font-size: 16px; margin-bottom: 10px; } /* parágrafos */
.textoLongo ul { list-style: disc; padding-left: 22px; } /* lista com marcas */
.textoLongo a { color: var(--corLaranjaEscuro); text-decoration: underline; } /* ligações sublinhadas */
.notaActualizacao { font-size: 13px; } /* data de actualização */
.linhaDireitos a { text-decoration: underline; } /* ligação da privacidade no rodapé */
@media (max-width: 1080px) { .grelhaOutrosServicos { grid-template-columns: 1fr 1fr; } } /* duas colunas no tablet */
@media (max-width: 860px) { .grelhaServicoDetalhe { grid-template-columns: 1fr; gap: 32px; } .ilustracaoServico { position: static; } .seccaoCapaInterna { background: linear-gradient(180deg, rgba(4, 8, 20, .9), rgba(4, 8, 20, .85)), url('/img/fundos/cidade-rede-telemovel.webp') 70% center / cover no-repeat, #070C1C; padding-top: calc(var(--alturaCabecalho) + 36px); } } /* páginas internas no telemóvel */
@media (max-width: 560px) { .grelhaInclui, .grelhaOutrosServicos { grid-template-columns: 1fr; } } /* uma coluna */

/* ===================== ANIMAÇÃO DE ENTRADA ===================== */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } /* estado inicial escondido */
.revelar.revelado { opacity: 1; transform: none; } /* estado final visível */
.semJavascript .revelar { opacity: 1; transform: none; } /* sem JS, mostra tudo */
@media (prefers-reduced-motion: reduce) { .revelar, .pistaLogotipos { animation: none; transition: none; opacity: 1; transform: none; } } /* respeita quem não quer animações */

/* ===================== ECRÃS MÉDIOS (TABLET) ===================== */
@media (max-width: 1180px) { .menuPrincipal { gap: 20px; } .botaoTelefoneCabecalho { display: none; } } /* menu mais compacto */
@media (max-width: 1080px) { .grelhaServicos { grid-template-columns: repeat(2, 1fr); } .grelhaPassos { grid-template-columns: repeat(2, 1fr); } .grelhaRodape { grid-template-columns: 1fr 1fr; } } /* grelhas em duas colunas */

/* ===================== TELEMÓVEL ===================== */
@media (max-width: 860px) { :root { --alturaCabecalho: 70px; } .logotipoImagem { height: 40px; } } /* cabeçalho mais baixo */
@media (max-width: 860px) { .botaoMenuMovel { display: grid; place-items: center; } } /* mostra o hambúrguer */
@media (max-width: 860px) { .menuPrincipal { position: fixed; top: var(--alturaCabecalho); left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; padding: 10px 24px 24px; box-shadow: 0 20px 40px rgba(15, 23, 42, .12); transform: translateY(-120%); transition: transform .3s; } } /* menu móvel escondido em cima */
@media (max-width: 860px) { .menuPrincipal.aberto { transform: translateY(0); } .ligacaoMenu { padding: 14px 0; border-bottom: 1px solid var(--corBorda); font-size: 16px; } .ligacaoMenu::after { display: none; } .botaoMenuTelemovel { display: inline-flex; justify-content: center; margin-top: 16px; } } /* menu móvel aberto */
@media (max-width: 860px) { .grelhaSobre, .grelhaContacto, .grelhaProdutos { grid-template-columns: 1fr; } .grelhaConfianca { grid-template-columns: 1fr 1fr; } } /* tudo numa coluna */
@media (max-width: 860px) { .seccao { padding: 72px 0; } } /* cartões flutuantes dentro do ecrã */
@media (max-width: 560px) { .grelhaServicos, .grelhaPassos, .grelhaCampos, .grelhaConfianca, .grelhaRodape { grid-template-columns: 1fr; } .faixaChamada { padding: 32px 24px; } .cartaoProduto { padding: 26px; } } /* uma coluna em ecrãs pequenos */
@media (max-width: 560px) { .grupoBotoes > a, .grupoBotoes > button { flex: 1 1 100%; justify-content: center; } } /* botões a toda a largura */
@media (max-width: 860px) { .accoesCabecalho { display: none; } .menuPrincipal .ligacaoMenu { color: var(--corTextoSuave); } .barraSolucoes { grid-template-columns: repeat(3, 1fr); } .itemSolucao:nth-child(4)::before { display: none; } } /* telemóvel: menu escuro e barra em 3 colunas */
@media (max-width: 860px) { .seccaoCapa { background: linear-gradient(180deg, rgba(4, 8, 20, .88) 0%, rgba(4, 8, 20, .7) 55%, rgba(4, 8, 20, .9) 100%), url('/img/fundos/cidade-rede-telemovel.webp') 70% center / cover no-repeat, #070C1C; min-height: auto; padding-top: calc(var(--alturaCabecalho) + 48px); } .seccaoCapa .contentor { gap: 44px; } } /* capa no telemóvel */
@media (max-width: 560px) { .itemSolucao { font-size: 14px; padding: 12px 4px; } .itemSolucao i { font-size: 24px; } } /* soluções mais compactas */