/* AllPerfect — folha de estilo única. As páginas são geradas por _build/build.mjs; as classes aqui acompanham os templates em _build/templates/. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0B2545; --navy-alto: #0f2942; --navy-esc: #071829; --gold: #C9A84C; --gold-esc: #a88a35; --white: #ffffff; --bg: #f7f8fa; --bg-quente: #faf8f3; --text: #1a1a2e; --muted: #5f6674; --border: #e4e7ec; --whatsapp: #25D366; --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --raio: 10px; --raio-g: 16px; --sombra: 0 1px 2px rgba(11,37,69,.06), 0 6px 20px rgba(11,37,69,.07); --sombra-alta: 0 4px 12px rgba(11,37,69,.10), 0 18px 40px rgba(11,37,69,.12); --transicao: .2s ease; } /* overflow-x tem de estar no : o menu off-canvas é position:fixed e um elemento fixo empurrado para fora da viewport não é recortado pelo body. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--ff); color: var(--text); background: var(--white); line-height: 1.65; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } a { text-decoration: none; color: inherit; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; font-weight: 700; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; } .container-estreito { max-width: 760px; } .centrado { text-align: center; margin-top: 2.5rem; } .salta-para-conteudo { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--raio) 0; } .salta-para-conteudo:focus { left: 0; } /* ─────────────────────────────────────────────────── botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.35rem; border-radius: var(--raio); font-weight: 600; font-size: .95rem; text-align: center; transition: var(--transicao); border: 1.5px solid transparent; cursor: pointer; } .btn-lg { padding: .95rem 1.9rem; font-size: 1rem; } .btn-full { width: 100%; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-primary { background: var(--gold); color: var(--navy-esc); } .btn-primary:hover { background: var(--gold-esc); color: #fff; transform: translateY(-1px); box-shadow: var(--sombra-alta); } .btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; } .btn-outline:hover { background: var(--navy); color: #fff; } .btn-outline-claro { border-color: rgba(255,255,255,.45); color: #fff; } .btn-outline-claro:hover { background: #fff; color: var(--navy); border-color: #fff; } .btn-whatsapp { background: var(--whatsapp); color: #fff; } .btn-whatsapp:hover { background: #1da851; transform: translateY(-1px); } /* ─────────────────────────────────────────────────── cabeçalho */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; } .nav-logo { display: flex; align-items: center; flex-shrink: 0; } .nav-logo img { height: 40px; width: auto; object-fit: contain; } .nav-logo-text { display: none; font-size: 1.2rem; font-weight: 700; color: var(--navy); } .nav-logo-text span { color: var(--gold); } .nav-menu { display: none; align-items: center; gap: .15rem; } @media (min-width: 1024px) { .nav-menu { display: flex; } } .nav-link { display: flex; align-items: center; gap: 4px; padding: .55rem .8rem; border-radius: var(--raio); font-size: .93rem; font-weight: 500; color: var(--text); transition: var(--transicao); } .nav-link:hover { background: var(--bg); color: var(--navy); } .nav-link[aria-current="page"] { color: var(--gold-esc); font-weight: 600; } .nav-item { position: relative; } .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: #fff; border: 1px solid var(--border); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); padding: .5rem; z-index: 110; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: var(--transicao); } .dropdown-link { display: block; padding: .6rem .85rem; border-radius: var(--raio); font-size: .9rem; transition: var(--transicao); } .dropdown-link:hover { background: var(--bg); color: var(--gold-esc); } .header-cta { display: none; align-items: center; gap: 1rem; } @media (min-width: 1024px) { .header-cta { display: flex; } } .header-tel { font-weight: 600; font-size: .92rem; color: var(--navy); white-space: nowrap; } .header-tel:hover { color: var(--gold-esc); } .nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: .5rem; } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-toggle span { display: block; width: 25px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--transicao); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* menu móvel */ .mobile-overlay { position: fixed; inset: 0; background: rgba(7,24,41,.55); z-index: 120; opacity: 0; visibility: hidden; transition: var(--transicao); } .mobile-overlay.aberto { opacity: 1; visibility: visible; } .mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); z-index: 130; background: #fff; padding: 5rem 1.5rem 2rem; overflow-y: auto; transform: translateX(100%); transition: transform .28s ease, visibility .28s; box-shadow: var(--sombra-alta); /* Fechado fica mesmo fora de jogo: não alarga a página nem apanha foco. */ visibility: hidden; } .mobile-menu.aberto { transform: translateX(0); visibility: visible; } .mobile-nav-link { display: block; padding: .8rem 0; font-size: 1.05rem; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--border); } .mobile-nav-titulo { display: block; padding: 1.4rem 0 .5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .mobile-nav-sub { display: block; padding: .55rem 0 .55rem .9rem; font-size: .95rem; color: var(--text); border-left: 2px solid var(--border); } .mobile-nav-sub:hover { border-left-color: var(--gold); color: var(--gold-esc); } .mobile-menu-cta { margin-top: 2rem; display: grid; gap: .7rem; } /* ─────────────────────────────────────────────────── migalhas */ .migalhas { background: var(--bg); border-bottom: 1px solid var(--border); font-size: .84rem; color: var(--muted); } .migalhas .container { padding-top: .85rem; padding-bottom: .85rem; display: flex; flex-wrap: wrap; align-items: center; } .migalhas a { color: var(--muted); } .migalhas a:hover { color: var(--gold-esc); text-decoration: underline; } .migalhas [aria-current] { color: var(--navy); font-weight: 600; } .migalha-sep { margin: 0 .5rem; opacity: .5; } /* ─────────────────────────────────────────────────── heróis */ .hero { padding: 4rem 0; } .hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 1rem; } .hero-sub { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--muted); max-width: 64ch; } .hero-botoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .hero-nota { margin-top: 1.2rem; font-size: .88rem; color: var(--muted); } .hero-interior { background: linear-gradient(180deg, var(--bg) 0%, #fff 100%); border-bottom: 1px solid var(--border); } .hero-servico .hero-icone { display: inline-flex; padding: .9rem; background: var(--navy); color: var(--gold); border-radius: var(--raio-g); margin-bottom: 1.25rem; } .icone { width: 24px; height: 24px; } .icone-grande { width: 34px; height: 34px; } .hero-inicio { position: relative; color: #fff; padding: 6rem 0 5rem; background: var(--navy-esc); } .hero-inicio::before { content: ''; position: absolute; inset: 0; background-image: var(--hero-foto); background-size: cover; background-position: center; opacity: .3; } .hero-inicio::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,24,41,.94) 0%, rgba(7,24,41,.7) 55%, rgba(7,24,41,.45) 100%); } .hero-inicio .container { position: relative; z-index: 1; } .hero-inicio-texto { max-width: 42rem; } .hero-inicio .hero-sub, .hero-inicio .hero-nota { color: rgba(255,255,255,.85); } .hero-etiqueta { display: inline-block; margin-bottom: 1.1rem; padding: .35rem .9rem; border: 1px solid rgba(201,168,76,.5); border-radius: 100px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); } .hero-projeto { background: var(--navy); color: #fff; border-bottom: none; } .hero-projeto .hero-sub { color: rgba(255,255,255,.82); } .projeto-etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; } .etiqueta { display: inline-block; padding: .3rem .8rem; border-radius: 100px; font-size: .76rem; font-weight: 600; letter-spacing: .03em; background: var(--gold); color: var(--navy-esc); } .etiqueta-zona { background: rgba(255,255,255,.16); color: #fff; } a.etiqueta:hover { filter: brightness(1.1); } /* ─────────────────────────────────────────────────── secções */ .seccao { padding: 4.5rem 0; } .seccao-clara { background: var(--bg); } .seccao-escura { background: var(--navy); color: #fff; } .seccao-escura h2 { color: #fff; } /* Especificidade acima de .texto-corrido p, que vem mais abaixo e ganharia. */ .seccao-escura p, .seccao-escura .texto-corrido p { color: rgba(255,255,255,.84); } .seccao-titulo { font-size: clamp(1.5rem, 3vw, 2.1rem); text-align: center; margin-bottom: .75rem; } .seccao-titulo-esq { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: 1.5rem; } .seccao-sub { text-align: center; color: var(--muted); max-width: 62ch; margin: 0 auto 2.75rem; } .seccao-titulo + .grelha-servicos, .seccao-titulo + .grelha-zonas, .seccao-titulo + .grelha-projetos, .seccao-titulo + .galeria, .seccao-titulo + .grelha-desafios { margin-top: 2.75rem; } .texto-corrido h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin: 2.25rem 0 1rem; } .texto-corrido h2:first-child { margin-top: 0; } .texto-corrido p { margin-bottom: 1.1rem; color: #33384a; } .texto-corrido p:last-child { margin-bottom: 0; } .texto-corrido a { color: var(--gold-esc); text-decoration: underline; text-underline-offset: 3px; } .destaque-intro { font-size: 1.15rem; color: #2c3242; } .nota-localidades { font-size: .93rem; color: var(--muted); padding-top: .5rem; border-top: 1px solid var(--border); } .duas-colunas { display: grid; gap: 3rem; } @media (min-width: 900px) { .duas-colunas { grid-template-columns: 1fr 1fr; gap: 4rem; } } /* ─────────────────────────────────────────────────── grelhas e cartões */ .grelha-servicos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .cartao-servico { display: flex; flex-direction: column; padding: 1.9rem 1.6rem; background: #fff; border: 1px solid var(--border); border-radius: var(--raio-g); transition: var(--transicao); } .cartao-servico:hover { border-color: var(--gold); box-shadow: var(--sombra-alta); transform: translateY(-3px); } .cartao-servico-icone { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: var(--navy); color: var(--gold); border-radius: 12px; margin-bottom: 1.1rem; } .cartao-servico h3 { font-size: 1.12rem; margin-bottom: .5rem; color: var(--navy); } .cartao-servico p { font-size: .93rem; color: var(--muted); flex: 1; } .cartao-seta { margin-top: 1.1rem; font-size: .87rem; font-weight: 600; color: var(--gold-esc); } .grelha-zonas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .cartao-zona { display: flex; flex-direction: column; padding: 1.6rem; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--raio); transition: var(--transicao); } .cartao-zona:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); } .cartao-zona h2, .cartao-zona h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: .5rem; } .cartao-zona p { font-size: .9rem; color: var(--muted); flex: 1; } .cartao-zona-meta { margin-top: 1rem; font-size: .82rem; font-weight: 600; color: var(--gold-esc); } .cartao-zona-servicos { margin-top: .3rem; font-size: .78rem; color: var(--muted); } .grelha-zonas-hub { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .cartao-zona-grande { padding: 2rem; } .cartao-zona-grande h2 { font-size: 1.35rem; } /* auto-fill, e não auto-fit: com um só projeto o cartão mantém a largura de coluna em vez de esticar para a linha toda. */ .grelha-projetos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .cartao-projeto { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--raio-g); transition: var(--transicao); } .cartao-projeto:hover { box-shadow: var(--sombra-alta); transform: translateY(-4px); } .cartao-projeto-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); } .cartao-projeto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .cartao-projeto:hover .cartao-projeto-foto img { transform: scale(1.05); } .cartao-projeto-texto { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .cartao-projeto-texto .etiqueta { align-self: flex-start; margin-bottom: .7rem; } .cartao-projeto h3 { font-size: 1.08rem; color: var(--navy); margin-bottom: .5rem; } .cartao-projeto p { font-size: .91rem; color: var(--muted); flex: 1; } .cartao-projeto-meta { margin-top: 1rem; font-size: .8rem; color: var(--muted); } .grelha-desafios { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .desafio { padding: 1.7rem; background: #fff; border-radius: var(--raio-g); border-top: 3px solid var(--gold); box-shadow: var(--sombra); } .desafio h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: .6rem; } .desafio p { font-size: .93rem; color: var(--muted); } .grelha-valores { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .valor { text-align: left; } .valor .icone { width: 32px; height: 32px; color: var(--gold-esc); margin-bottom: .9rem; } .valor h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: .5rem; } .valor p { font-size: .92rem; color: var(--muted); } /* ─────────────────────────────────────────────────── listas e passos */ .lista-marcada { list-style: none; display: grid; gap: .85rem; } .lista-marcada li { position: relative; padding-left: 2rem; color: #33384a; } .lista-marcada li::before { content: ''; position: absolute; left: 0; top: .45em; width: 1.1rem; height: .6rem; border-left: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold); transform: rotate(-45deg); } .passos { list-style: none; display: grid; gap: 1.5rem; counter-reset: passo; } .passo { display: flex; gap: 1.1rem; } .passo-numero { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--gold); font-weight: 700; font-size: .9rem; } .passo h3 { font-size: 1rem; color: var(--navy); margin-bottom: .3rem; } .passo p { font-size: .93rem; color: var(--muted); } /* ─────────────────────────────────────────────────── FAQ */ .seccao-faq { background: var(--bg-quente); } .faq-lista { display: grid; gap: .75rem; margin-top: 2.5rem; } .faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--raio); overflow: hidden; } .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; font-weight: 600; font-size: .99rem; color: var(--navy); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--gold); flex-shrink: 0; line-height: 1; transition: transform .2s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item[open] summary { border-bottom: 1px solid var(--border); } .faq-resposta { padding: 1.15rem 1.35rem; } .faq-resposta p { color: var(--muted); font-size: .95rem; } /* ─────────────────────────────────────────────────── CTA */ .cta-faixa { background: var(--navy); color: #fff; padding: 4rem 0; text-align: center; } .cta-faixa h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .8rem; } .cta-faixa p { color: rgba(255,255,255,.82); max-width: 56ch; margin: 0 auto; } .cta-botoes { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; } /* ─────────────────────────────────────────────────── ligações internas */ .seccao-ligacoes { padding: 3.5rem 0; background: var(--bg); border-top: 1px solid var(--border); } .grelha-ligacoes { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grupo-ligacoes h2 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 1rem; } .grupo-ligacoes ul { list-style: none; display: grid; gap: .55rem; } .grupo-ligacoes a { font-size: .92rem; color: var(--navy); } .grupo-ligacoes a:hover { color: var(--gold-esc); text-decoration: underline; text-underline-offset: 3px; } /* ─────────────────────────────────────────────────── galeria e lightbox */ .galeria { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .galeria-item { padding: 0; overflow: hidden; border-radius: var(--raio); background: var(--bg); aspect-ratio: 4 / 3; transition: var(--transicao); } .galeria-item-vertical { aspect-ratio: 3 / 4; } .galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .galeria-item:hover { box-shadow: var(--sombra-alta); } .galeria-item:hover img { transform: scale(1.06); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(7,24,41,.96); display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 4rem; } .lightbox[hidden] { display: none; } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; } .lightbox button { position: absolute; color: #fff; opacity: .8; transition: var(--transicao); } .lightbox button:hover { opacity: 1; } .lightbox-fechar { top: 1rem; right: 1.25rem; font-size: 2.4rem; line-height: 1; } .lightbox-anterior, .lightbox-seguinte { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 1rem; } .lightbox-anterior { left: .5rem; } .lightbox-seguinte { right: .5rem; } .lightbox-legenda { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: .88rem; } /* ─────────────────────────────────────────────────── contactos */ .contactos-grelha { display: grid; gap: 3rem; } @media (min-width: 900px) { .contactos-grelha { grid-template-columns: 1fr 1.25fr; gap: 4rem; } } .contactos-info h2, .contactos-form h2 { font-size: 1.4rem; margin-bottom: 1.5rem; color: var(--navy); } .contacto-cartao { display: block; padding: 1.1rem 1.3rem; margin-bottom: .8rem; background: #fff; border: 1px solid var(--border); border-radius: var(--raio); transition: var(--transicao); } a.contacto-cartao:hover { border-color: var(--gold); box-shadow: var(--sombra); transform: translateY(-2px); } .contacto-etiqueta { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .3rem; } .contacto-valor { display: block; font-size: 1.02rem; font-weight: 600; color: var(--navy); } .contacto-cartao-whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); } .contacto-cartao-whatsapp .contacto-etiqueta { color: rgba(255,255,255,.8); } .contacto-cartao-whatsapp .contacto-valor { color: #fff; } .contacto-cartao-estatico { background: var(--bg); } .contacto-cartao-estatico .contacto-valor { font-weight: 500; font-size: .95rem; line-height: 1.5; } .formulario { display: grid; gap: 1.1rem; } .form-nota { color: var(--muted); font-size: .93rem; margin-top: -.75rem; margin-bottom: .5rem; } .form-linha { display: grid; gap: 1.1rem; } @media (min-width: 600px) { .form-linha { grid-template-columns: 1fr 1fr; } } .form-campo { display: grid; gap: .4rem; } .form-campo label { font-size: .87rem; font-weight: 600; color: var(--navy); } .form-campo input, .form-campo select, .form-campo textarea { width: 100%; padding: .75rem .9rem; font: inherit; font-size: .95rem; border: 1px solid var(--border); border-radius: var(--raio); background: #fff; color: var(--text); transition: var(--transicao); } .form-campo textarea { resize: vertical; } .form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.16); } .form-aviso { font-size: .8rem; color: var(--muted); text-align: center; } /* ─────────────────────────────────────────────────── rodapé */ .site-footer { background: var(--navy-esc); color: rgba(255,255,255,.72); padding: 4rem 0 2rem; font-size: .93rem; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .footer-col-marca { grid-column: span 1; } @media (min-width: 900px) { .footer-col-marca { grid-column: span 1; max-width: 22rem; } } /* O logótipo do rodapé é agora SVG branco sobre o azul, sem caixa por baixo — por isso deixou de precisar do canto arredondado que suavizava o retângulo. */ .footer-logo { height: 64px; width: auto; margin-bottom: .6rem; } .footer-assinatura { margin-bottom: 1rem; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } .footer-logo-text { display: none; font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 1rem; } .footer-logo-text span { color: var(--gold); } .footer-sobre { line-height: 1.7; } .footer-social { display: flex; gap: .7rem; margin-top: 1.4rem; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.09); color: #fff; transition: var(--transicao); } .footer-social a:hover { background: var(--gold); color: var(--navy-esc); } .footer-social svg { width: 18px; height: 18px; } .footer-titulo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin-bottom: 1.1rem; } .footer-link { display: block; padding: .3rem 0; color: rgba(255,255,255,.72); transition: var(--transicao); } .footer-link:hover { color: var(--gold); padding-left: 4px; } .footer-contact-row { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; } .footer-contact-row svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .3rem; color: var(--gold); } .footer-contact-row a:hover { color: var(--gold); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.11); font-size: .85rem; } .footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer-legal a:hover { color: var(--gold); } .whatsapp-flutuante { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--whatsapp); color: #fff; border-radius: 50%; box-shadow: 0 6px 20px rgba(37,211,102,.4); transition: var(--transicao); } .whatsapp-flutuante:hover { transform: scale(1.08); } .whatsapp-flutuante svg { width: 30px; height: 30px; } /* ─────────────────────────────────────────────────── impressão */ @media print { .site-header, .mobile-menu, .mobile-overlay, .whatsapp-flutuante, .cta-faixa, .seccao-ligacoes { display: none; } body { color: #000; } } /* ------------------------------------------------- perguntas frequentes */ .indice-faq { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.25rem; background: var(--bg-quente); border: 1px solid var(--border); border-radius: var(--raio-g); } .indice-faq a { padding: .4rem .85rem; font-size: .9rem; font-weight: 500; color: var(--navy); text-decoration: none; background: #fff; border: 1px solid var(--border); border-radius: 999px; transition: var(--transicao); } .indice-faq a:hover { background: var(--navy); border-color: var(--navy); color: #fff; } /* Sem isto, saltar para uma secção esconde o título por baixo do cabeçalho fixo. */ .seccao-faq[id] { scroll-margin-top: 90px; } .faq-ligacao { margin-top: 1.5rem; } .faq-ligacao a { font-weight: 600; color: var(--navy); text-decoration: none; } .faq-ligacao a:hover { color: var(--gold-esc); text-decoration: underline; } .footer-link-destaque { margin-top: 1rem; font-weight: 600; } /* ------------------------------------------------------------ formulário */ /* O campo-armadilha tem de estar fora de vista mas presente para os robôs: display:none seria ignorado por muitos deles, por isso empurra-se para fora do ecrã em vez de o esconder. */ .form-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-sucesso { padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: #e9f7ef; border: 1px solid #b7e4c7; border-radius: var(--raio); color: #14532d; font-weight: 500; } /* --------------------------------------------------------- idiomas */ .seletor-idioma { display: flex; align-items: center; gap: .35rem; } .idioma-link { padding: .3rem .5rem; border-radius: var(--raio); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); transition: var(--transicao); } .idioma-link:hover { color: var(--navy); background: var(--bg); } .idioma-ativo { color: var(--navy); } .idioma-sep { color: var(--border); font-size: .8rem; } /* No menu móvel o seletor fica em destaque no topo, onde se procura. */ .mobile-menu .seletor-idioma { justify-content: center; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .mobile-menu .idioma-link { font-size: 1rem; padding: .5rem 1rem; } /* ------------------------------------------------- consentimento de cookies */ .banner-cookies { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 140; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; max-width: 900px; margin: 0 auto; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); } .banner-cookies[hidden] { display: none; } .banner-cookies-texto { flex: 1 1 340px; } .banner-cookies h2 { font-size: 1rem; margin-bottom: .35rem; } .banner-cookies p { font-size: .88rem; color: var(--muted); line-height: 1.55; } .banner-cookies a { color: var(--navy); font-weight: 600; text-decoration: underline; } .banner-cookies-botoes { display: flex; gap: .6rem; flex: 0 0 auto; } .banner-cookies .btn { padding: .6rem 1.2rem; font-size: .9rem; } /* O botão do rodapé reabre a escolha; tem de parecer um link, não um botão. */ .footer-legal-botao { font-size: inherit; color: inherit; text-decoration: none; padding: 0; opacity: .85; } .footer-legal-botao:hover { opacity: 1; text-decoration: underline; } /* Ecrã pequeno: o banner ocupa a largura e os botões ficam lado a lado. */ @media (max-width: 560px) { .banner-cookies { left: .5rem; right: .5rem; bottom: .5rem; padding: 1rem; gap: .9rem; } .banner-cookies-botoes { width: 100%; } .banner-cookies-botoes .btn { flex: 1; } /* Sem isto o botão flutuante do WhatsApp fica por cima do banner. */ .whatsapp-flutuante { bottom: 12rem; } } /* Crédito de autoria, no rodapé. Fica na mesma linha do copyright em ecrã largo e passa para baixo quando não cabe. */ .footer-credito { display: inline-block; margin-left: .4rem; opacity: .8; } .footer-credito a { text-decoration: underline; text-underline-offset: 2px; } .footer-credito a:hover { color: var(--gold); } @media (max-width: 600px) { .footer-credito { display: block; margin: .4rem 0 0; } }