/* =========================================================================
   Total Supply & Services, Lda. — folha de estilos
   css/tema_base.css
   Tema adaptado às cores da bit Consulting + layout de footer Onfon Media
   (versão limpa: sem regras duplicadas nem código morto)
   ========================================================================= */


/* =========================================================================
   1. FICHAS DE COR, TIPO E ESPAÇO
   ========================================================================= */

:root {
    /* cores da marca (bit Consulting) */
    --azul-marinho: #2B2B2B;
    /* carvão — substitui o navy principal */
    --bronze: #D32F2F;
    /* vermelho — substitui o bronze */
    --cinzento-marca: #606061;
    /* variantes do vermelho, por fundo */
    --bronze-claro: #F5A623;
    /* dourado — sobre fundo escuro */
    --bronze-texto: #B71C1C;
    /* vermelho escuro para texto sobre branco */
    --bronze-escuro: #A52222;
    /* hover do botão vermelho */
    /* restante sistema */
    --azul-profundo: #1A1D23;
    --azul-aco: #3D3D3D;
    --cinzento-aco: #F4F6F9;
    --linha: #DDE2EA;
    --linha-campo: #6B7686;
    --texto-secundario: #5C6879;
    --tinta: #101623;
    --texto-sobre-escuro: #B7C1D3;
    --branco: #FFFFFF;
    /* WhatsApp */
    --whatsapp: #25D366;
    --whatsapp-escuro: #1DA851;
    /* erro de formulário */
    --erro-texto: #8E2418;
    --erro-contorno: #A32B1E;
    --erro-fundo: #FDF6F5;
    /* tipografia */
    --tipo-titulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --tipo-corpo: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    /* escala tipográfica fluida */
    --t-heroi: clamp(2.00rem, 1.35rem + 2.70vw, 3.50rem);
    --t-seccao: clamp(1.62rem, 1.25rem + 1.55vw, 2.50rem);
    --t-sub: clamp(1.25rem, 1.08rem + 0.72vw, 1.62rem);
    --t-cartao: clamp(1.12rem, 1.03rem + 0.36vw, 1.31rem);
    --t-corpo: clamp(1.00rem, 0.97rem + 0.14vw, 1.06rem);
    --t-pequeno: 0.94rem;
    --t-etiqueta: 0.8125rem;
    /* espaço */
    --e1: 8px;
    --e2: 16px;
    --e3: 24px;
    --e4: 32px;
    --e5: 40px;
    --e6: 48px;
    --e8: 64px;
    --e10: 80px;
    --respiro-seccao: clamp(56px, 8vw, 96px);
    /* grelha */
    --largura-conteudo: 1200px;
    --margem-lateral: clamp(20px, 4.2vw, 48px);
    /* alvo mínimo de toque */
    --alvo-toque: 44px;
    /* outros */
    --raio: 4px;
    --sombra-cartao: 0 1px 3px rgba(16, 27, 51, .08), 0 8px 24px rgba(16, 27, 51, .06);
    --sombra-painel: 0 12px 40px rgba(16, 27, 51, .28);
    --transicao: 160ms ease;
    --barra-accao: 0px;
}


/* =========================================================================
   2. REPOSIÇÃO E BASE
   ========================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--tipo-corpo);
    font-size: var(--t-corpo);
    line-height: 1.65;
    color: var(--tinta);
    background: var(--branco);
    overflow-x: hidden;
    padding-bottom: var(--barra-accao);
}

h1,
h2,
h3,
h4 {
    font-family: var(--tipo-titulo);
    color: var(--azul-marinho);
    line-height: 1.18;
    margin: 0 0 var(--e2);
    overflow-wrap: break-word;
}

h1 {
    font-size: var(--t-heroi);
    font-weight: 800;
    letter-spacing: -.02em;
}

h2 {
    font-size: var(--t-seccao);
    font-weight: 700;
    letter-spacing: -.015em;
}

h3 {
    font-size: var(--t-cartao);
    font-weight: 700;
}

h4 {
    font-size: var(--t-corpo);
    font-weight: 600;
}

p {
    margin: 0 0 var(--e2);
}

p:last-child {
    margin-bottom: 0;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--azul-aco);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--azul-marinho);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--bronze);
    outline-offset: 2px;
    border-radius: 2px;
}

:where(.heroi, .seccao--escura, .apelo-final, .faixa, .rodape, .painel-menu, .barra-contactos) :where(a, button, summary, [tabindex]):focus-visible {
    outline-color: var(--bronze-claro);
}

[hidden] {
    display: none !important;
}

.oculto-visualmente {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.salto-conteudo {
    position: absolute;
    left: -9999px;
    z-index: 999;
    background: var(--azul-marinho);
    color: var(--branco);
    padding: var(--e2) var(--e3);
    font-weight: 600;
}

.salto-conteudo:focus {
    left: var(--e2);
    top: var(--e2);
}


/* =========================================================================
   3. GRELHA E SECÇÕES
   ========================================================================= */

.envelope {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin-inline: auto;
    padding-inline: var(--margem-lateral);
}

.seccao {
    padding-block: var(--respiro-seccao);
}

.seccao--aco {
    background: var(--cinzento-aco);
}

.seccao--escura {
    background: var(--azul-profundo);
    color: var(--texto-sobre-escuro);
}

.seccao--escura h2,
.seccao--escura h3 {
    color: var(--branco);
}

.seccao--compacta {
    padding-block: var(--e8);
}

.chapa {
    display: flex;
    align-items: center;
    gap: var(--e2);
    font-family: var(--tipo-corpo);
    font-size: var(--t-etiqueta);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bronze-texto);
    margin-bottom: var(--e2);
}

.chapa::before {
    content: '';
    flex: 0 0 26px;
    height: 2px;
    background: var(--bronze);
}

.seccao--escura .chapa,
.heroi .chapa,
.apelo-final .chapa {
    color: var(--bronze-claro);
}

.seccao--escura .chapa::before,
.heroi .chapa::before,
.apelo-final .chapa::before {
    background: var(--bronze-claro);
}

.chapa--mv {
    margin-bottom: 12px;
}

.cabeca-seccao {
    max-width: 760px;
    margin-bottom: var(--e6);
}

.cabeca-seccao p:not(.chapa) {
    font-size: var(--t-sub);
    color: var(--texto-secundario);
    line-height: 1.5;
}

.seccao--escura .cabeca-seccao p:not(.chapa) {
    color: var(--texto-sobre-escuro);
}

.grelha {
    display: grid;
    gap: var(--e3);
}

.grelha--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grelha--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grelha--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grelha--larga {
    gap: var(--e5);
}


/* =========================================================================
   4. BOTÕES
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e1);
    min-height: var(--alvo-toque);
    padding: 14px var(--e4);
    font-family: var(--tipo-corpo);
    font-size: var(--t-corpo);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--raio);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 27, 51, .18);
}

.btn:active {
    transform: none;
    box-shadow: none;
}

.btn--cotacao {
    background: var(--bronze);
    color: var(--branco);
    border-color: var(--bronze);
}

.btn--cotacao:hover,
.btn--cotacao:focus-visible {
    background: var(--bronze-escuro);
    border-color: var(--bronze-escuro);
    color: var(--branco);
}

.btn--principal {
    background: var(--azul-marinho);
    color: var(--branco);
    border-color: var(--azul-marinho);
}

.btn--principal:hover {
    background: var(--azul-aco);
    border-color: var(--azul-aco);
    color: var(--branco);
}

.btn--contorno {
    background: transparent;
    color: var(--azul-marinho);
    border-color: var(--azul-marinho);
}

.btn--contorno:hover {
    background: var(--azul-marinho);
    color: var(--branco);
}

.btn--contorno-claro {
    background: transparent;
    color: var(--branco);
    border-color: rgba(255, 255, 255, .55);
}

.btn--contorno-claro:hover {
    background: var(--branco);
    color: var(--azul-marinho);
    border-color: var(--branco);
}

.btn--whatsapp {
    background: var(--whatsapp);
    color: var(--branco);
    border-color: var(--whatsapp);
}

.btn--whatsapp:hover {
    background: var(--whatsapp-escuro);
    border-color: var(--whatsapp-escuro);
    color: var(--branco);
}

.btn--largo {
    width: 100%;
}

.grupo-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}


/* =========================================================================
   5. CABEÇALHO
   ========================================================================= */

.barra-contactos {
    background: var(--azul-profundo);
    color: var(--texto-sobre-escuro);
    font-size: var(--t-pequeno);
}

.barra-contactos .envelope {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 44px;
    flex-wrap: wrap;
}

.barra-contactos a {
    color: var(--texto-sobre-escuro);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
}

.barra-contactos a:hover {
    color: var(--branco);
    text-decoration: underline;
}

.barra-contactos .separa {
    margin-left: auto;
}

.barra-contactos .horario {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.barra-contactos .horario~.separa {
    margin-left: 0;
}

.barra-contactos .icone {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--bronze-claro);
}

.selector-idioma {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-inline: 4px;
    min-height: var(--alvo-toque);
}

.selector-idioma::before {
    content: '';
    position: absolute;
    inset: 6px 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    pointer-events: none;
}

.selector-idioma a,
.selector-idioma span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--alvo-toque);
    min-height: var(--alvo-toque);
    padding-inline: 12px;
    font-size: var(--t-etiqueta);
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
}

.selector-idioma a:hover {
    text-decoration: none;
    color: var(--branco);
}

.selector-idioma [aria-current='true'] {
    color: var(--branco);
}

.selector-idioma [aria-current='true']::before,
.selector-idioma a:hover::before {
    content: '';
    position: absolute;
    inset: 10px 0;
    z-index: -1;
    border-radius: 999px;
}

.selector-idioma [aria-current='true']::before {
    background: var(--bronze);
}

.selector-idioma a:hover::before {
    background: rgba(255, 255, 255, .14);
}

.selector-idioma a:focus-visible {
    outline-offset: -4px;
    border-radius: 999px;
}

.idioma-movel {
    display: none;
}

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
    transition: box-shadow var(--transicao);
}

.cabecalho.com-sombra {
    box-shadow: 0 6px 24px rgba(16, 27, 51, .10);
}

.cabecalho .envelope {
    display: flex;
    align-items: center;
    gap: var(--e4);
    min-height: 92px;
}

.marca {
    display: flex;
    align-items: center;
    min-height: var(--alvo-toque);
    text-decoration: none;
    flex-shrink: 0;
}

.marca img {
    height: 64px;
    width: auto;
    display: block;
}

.logo-rodape {
    height: 60px;
    width: auto;
    margin-bottom: var(--e2);
}

.navegacao {
    margin-left: auto;
}

.navegacao ul {
    display: flex;
    align-items: center;
    gap: var(--e3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.navegacao>ul>li>a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    font-size: var(--t-pequeno);
    font-weight: 600;
    color: var(--azul-marinho);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.navegacao>ul>li>a:hover,
.navegacao>ul>li>a[aria-current='page'] {
    color: var(--azul-aco);
    border-bottom-color: var(--bronze);
}

.navegacao>ul>li>a.btn--cotacao,
.navegacao>ul>li>a.btn--cotacao:hover {
    color: var(--branco);
}

.navegacao>ul>li>a.btn--cotacao:hover {
    border-bottom-color: var(--bronze-escuro);
}

.btn-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    cursor: pointer;
}

.btn-menu span,
.btn-menu span::before,
.btn-menu span::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--azul-marinho);
    transition: transform var(--transicao), opacity var(--transicao);
}

.btn-menu span {
    position: relative;
}

.btn-menu span::before {
    position: absolute;
    top: -6px;
}

.btn-menu span::after {
    position: absolute;
    top: 6px;
}

.btn-menu[aria-expanded='true'] span {
    background: transparent;
}

.btn-menu[aria-expanded='true'] span::before {
    transform: translateY(6px) rotate(45deg);
}

.btn-menu[aria-expanded='true'] span::after {
    transform: translateY(-6px) rotate(-45deg);
}


/* =========================================================================
   6. HERÓI E MIGALHAS
   ========================================================================= */

.heroi {
    position: relative;
    background: var(--azul-profundo);
    color: var(--texto-sobre-escuro);
    padding-block: var(--e10);
    overflow: hidden;
}

.heroi h1 {
    color: var(--branco);
    max-width: 18ch;
}

.heroi p:not(.chapa) {
    font-size: var(--t-sub);
    max-width: 46ch;
    line-height: 1.55;
    margin-bottom: var(--e5);
}

.heroi .grupo-botoes {
    margin-top: var(--e5);
}

.heroi .chapa {
    margin-bottom: var(--e3);
}

.foto-seccao {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: var(--raio);
}

.migalhas {
    font-size: var(--t-pequeno);
    color: var(--texto-secundario);
    padding-block: var(--e2);
}

.migalhas ol {
    display: flex;
    align-items: center;
    gap: var(--e1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.migalhas li {
    display: flex;
    align-items: center;
    gap: var(--e1);
    white-space: nowrap;
}

.migalhas li+li::before {
    content: '›';
    color: var(--bronze);
}

.migalhas a {
    color: var(--texto-secundario);
}


/* =========================================================================
   7. CARTÕES E LISTAS
   ========================================================================= */

.cartao {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: var(--e4);
    transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}

.cartao--ligacao:hover {
    border-color: var(--bronze);
    box-shadow: var(--sombra-cartao);
    transform: translateY(-2px);
}

.cartao h3 {
    margin: 0;
}

.cartao p {
    color: var(--texto-secundario);
}

.cartao .icone {
    flex-shrink: 0;
}

.cartao .seguir {
    margin-top: auto;
    padding-top: var(--e2);
    font-weight: 600;
    font-size: var(--t-pequeno);
    color: var(--azul-aco);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--alvo-toque);
}

.cartao--ligacao:hover .seguir {
    text-decoration: underline;
}

.cartao--numerado {
    position: relative;
    padding-top: var(--e6);
}

.cartao--numerado .numero {
    font-family: var(--tipo-corpo);
    font-size: var(--t-etiqueta);
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--bronze-texto);
}

.lista-marcada {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--e1);
}

.lista-marcada li {
    position: relative;
    padding-left: var(--e3);
    color: var(--texto-secundario);
}

.lista-marcada li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .68em;
    width: 10px;
    height: 2px;
    background: var(--bronze);
}

.seccao--escura .lista-marcada li {
    color: var(--texto-sobre-escuro);
}

.seccao--escura .lista-marcada li::before {
    background: var(--bronze-claro);
}


/* =========================================================================
   8. PERGUNTAS FREQUENTES, TABELAS E FAIXAS
   ========================================================================= */

.pergunta {
    border-bottom: 1px solid var(--linha);
}

.pergunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    min-height: 56px;
    padding-block: var(--e2);
    font-family: var(--tipo-titulo);
    font-size: var(--t-cartao);
    font-weight: 600;
    color: var(--azul-marinho);
    cursor: pointer;
    list-style: none;
}

.pergunta summary::-webkit-details-marker {
    display: none;
}

.pergunta summary::after {
    content: '+';
    flex-shrink: 0;
    font-family: var(--tipo-corpo);
    font-size: 1.5rem;
    color: var(--bronze);
    transition: transform var(--transicao);
}

.pergunta[open] summary::after {
    content: '–';
}

.pergunta .resposta {
    padding-bottom: var(--e3);
    color: var(--texto-secundario);
    max-width: 72ch;
}

.tabela-horario {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-corpo);
}

.tabela-horario th,
.tabela-horario td {
    text-align: left;
    padding: 14px var(--e2);
    border-bottom: 1px solid var(--linha);
}

.tabela-horario th {
    font-family: var(--tipo-corpo);
    font-weight: 600;
    color: var(--azul-marinho);
}

.tabela-horario td {
    color: var(--texto-secundario);
}

.faixa {
    background: var(--azul-marinho);
    color: var(--branco);
    border-radius: var(--raio);
    padding: var(--e6);
    display: flex;
    align-items: center;
    gap: var(--e5);
}

.faixa h2,
.faixa h3 {
    color: var(--branco);
    margin: 0 0 var(--e1);
}

.faixa p {
    color: var(--texto-sobre-escuro);
    margin: 0;
}

.faixa .grupo-botoes {
    margin-left: auto;
    flex-shrink: 0;
}


/* =========================================================================
   9. FORMULÁRIO
   ========================================================================= */

.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--e3);
}

.campo>label {
    font-weight: 600;
    font-size: var(--t-pequeno);
    color: var(--azul-marinho);
}

.campo .opcional {
    font-weight: 400;
    color: var(--texto-secundario);
}

.campo .ajuda {
    font-size: var(--t-pequeno);
    color: var(--texto-secundario);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: var(--alvo-toque);
    padding: 12px 14px;
    font-family: var(--tipo-corpo);
    font-size: var(--t-corpo);
    color: var(--tinta);
    background: var(--branco);
    border: 1px solid var(--linha-campo);
    border-radius: var(--raio);
}

.campo textarea {
    min-height: 140px;
    resize: vertical;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
    border-color: var(--azul-aco);
}

.campo input[type='file'] {
    padding: 10px;
    background: var(--cinzento-aco);
    cursor: pointer;
}

.campo input[type='file']::file-selector-button {
    margin-right: var(--e2);
    padding: 8px 14px;
    min-height: 36px;
    font: 600 var(--t-pequeno) var(--tipo-corpo);
    color: var(--branco);
    background: var(--azul-marinho);
    border: 0;
    border-radius: var(--raio);
    cursor: pointer;
}

.campo [aria-invalid='true'] {
    border-color: var(--erro-contorno);
    border-width: 2px;
    background: var(--erro-fundo);
}

.mensagem-erro {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--t-pequeno);
    font-weight: 500;
    color: var(--erro-texto);
}

.mensagem-erro::before {
    content: '⚠';
    flex-shrink: 0;
}

.mensagem-erro:not(:empty) {
    margin-top: 2px;
}

.resumo-erros {
    border: 2px solid var(--erro-contorno);
    background: var(--erro-fundo);
    border-radius: var(--raio);
    padding: var(--e3);
    margin-bottom: var(--e4);
}

.resumo-erros h2 {
    font-size: var(--t-cartao);
    color: var(--erro-texto);
    margin-bottom: var(--e1);
}

.resumo-erros a {
    color: var(--erro-texto);
}

.resumo-erros ul {
    margin: 0;
    padding-left: var(--e3);
    display: grid;
    gap: 6px;
}

.resumo-erros p {
    margin: var(--e2) 0 0;
    font-size: var(--t-pequeno);
    color: var(--erro-texto);
}

.resumo-erros:focus {
    outline: 3px solid var(--azul-aco);
    outline-offset: 2px;
}

.resumo-erros,
.campo input,
.campo select,
.campo textarea {
    scroll-margin-top: 110px;
}

.bloco-campos {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: var(--e4);
    margin-bottom: var(--e4);
}

.bloco-campos>legend {
    padding-inline: var(--e1);
    font-family: var(--tipo-corpo);
    font-size: var(--t-etiqueta);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bronze-texto);
}

.bloco-campos>legend .opcional {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--tipo-corpo);
    color: var(--texto-secundario);
}

.par-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3);
}

.cartoes-opcao {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e2);
}

.cartao-opcao {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e1);
    min-height: 56px;
    padding: var(--e2);
    border: 1px solid var(--linha-campo);
    border-radius: var(--raio);
    cursor: pointer;
    font-size: var(--t-pequeno);
    font-weight: 500;
}

.cartao-opcao:has(input:checked) {
    border-color: var(--bronze);
    border-width: 2px;
    background: rgba(211, 47, 47, .06);
}

.contador {
    font-size: var(--t-etiqueta);
    color: var(--texto-secundario);
    text-align: right;
}

.nota-campos {
    font-size: var(--t-pequeno);
    color: var(--texto-secundario);
    margin-bottom: var(--e3);
}

.formulario {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: var(--e4);
}

.seccao--aco .formulario,
.seccao--escura .formulario {
    box-shadow: var(--sombra-cartao);
}

.formulario .bloco-campos:last-of-type {
    margin-bottom: var(--e3);
}


/* =========================================================================
   10. RODAPÉ — igual ao da Onfon Media, cores bit Consulting
   ========================================================================= */

.rodape {
    position: relative;
    background: #1F2128;
    color: #A3ACBA;
    padding-block: 200px 60px;
    font-size: 1.05rem;
}

.rodape-envelope {
    max-width: none;
    padding-inline: 40px;
}


/* pílula branca com o logótipo, a meio da linha de topo */

.rodape-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    background: var(--branco);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    z-index: 2;
}

.rodape-logo img {
    height: 48px;
    width: auto;
    display: block;
}


/* 4 colunas iguais, afastadas 64px */

.colunas-rodape {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 64px;
    padding-bottom: 56px;
}


/* títulos grandes, com barra vermelha à esquerda */

.rodape h4 {
    position: relative;
    margin: 0 0 28px;
    padding-left: 20px;
    font-family: var(--tipo-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--branco);
}

.rodape h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 26px;
    background: #E0343C;
}


/* listas: linhas de 45px */

.rodape ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.rodape li>span {
    display: flex;
    align-items: center;
    min-height: 45px;
}

.rodape a {
    display: inline-flex;
    align-items: center;
    min-height: 45px;
    color: #A3ACBA;
    text-decoration: none;
    font-size: 1.05rem;
    transition: color var(--transicao);
}

.rodape a:hover {
    color: var(--branco);
    text-decoration: none;
}


/* linha inferior: copyright à esquerda, ícones sociais à direita */

.fecho-rodape {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    color: #A3ACBA;
    font-size: 1.05rem;
}

.fecho-rodape .nome-rodape {
    color: #E0343C;
    font-weight: 400;
}

.fecho-rodape>a {
    min-height: 0;
    font-size: .95rem;
}

.fecho-rodape .assinatura-rodape {
    margin-left: 24px;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .14);
    font-size: .95rem;
    letter-spacing: .02em;
}

.fecho-rodape .assinatura-rodape b {
    color: #E0343C;
    font-weight: 600;
}


/* ícones sociais redondos (50px, afastados 20px) */

.rodape-sociais {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    margin-right: 70px;
    /* deixa o botão de WhatsApp livre */
}

.rodape-sociais a {
    justify-content: center;
    width: 50px;
    height: 50px;
    min-height: 50px;
    border-radius: 50%;
    background: #2A2D36;
    color: var(--branco);
    transition: background var(--transicao), transform var(--transicao);
}

.rodape-sociais a:hover {
    background: #E0343C;
    color: var(--branco);
    transform: translateY(-2px);
}

.rodape-sociais .icone {
    width: 22px;
    height: 22px;
}


/* botão WhatsApp flutuante */

.whatsapp-flutuante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 75;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: var(--branco);
    box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.whatsapp-flutuante:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 26px rgba(37, 211, 102, .6);
    color: var(--branco);
}

.whatsapp-flutuante .icone {
    width: 40px;
    height: 40px;
}


/* =========================================================================
   11. MENU DE TELEMÓVEL E BARRA DE ACÇÃO
   ========================================================================= */

.painel-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 88vw);
    z-index: 90;
    background: var(--azul-marinho);
    color: var(--branco);
    box-shadow: var(--sombra-painel);
    padding: var(--e3) var(--e3) var(--e8);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 220ms ease;
    display: none;
}

.painel-menu[data-aberto='true'] {
    transform: translateX(0);
}

.painel-menu .topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--e3);
    padding-bottom: var(--e2);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.painel-menu .topo b {
    font-family: var(--tipo-corpo);
    font-size: var(--t-etiqueta);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bronze-claro);
    font-weight: 600;
}

.btn-fechar {
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--raio);
    color: var(--branco);
    font-size: 1.25rem;
    cursor: pointer;
}

.painel-menu nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.painel-menu nav>ul>li {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.painel-menu nav a {
    display: flex;
    align-items: center;
    min-height: 56px;
    color: var(--branco);
    font-size: var(--t-corpo);
    font-weight: 600;
    text-decoration: none;
}

.painel-menu nav a:hover {
    color: var(--bronze-claro);
}

.painel-menu details>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    color: var(--branco);
    font-size: var(--t-corpo);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.painel-menu details>summary::-webkit-details-marker {
    display: none;
}

.painel-menu details>summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--bronze-claro);
}

.painel-menu details[open]>summary::after {
    content: '–';
}

.painel-menu details ul {
    padding: 0 0 var(--e2) var(--e2);
    border-left: 2px solid var(--bronze);
    margin-left: 2px;
}

.painel-menu details a {
    min-height: var(--alvo-toque);
    font-size: var(--t-pequeno);
    font-weight: 500;
    color: var(--texto-sobre-escuro);
}

.painel-menu .contactos-menu {
    margin-top: var(--e4);
    padding-top: var(--e3);
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    gap: var(--e1);
    font-size: var(--t-pequeno);
    color: var(--texto-sobre-escuro);
}

.painel-menu .contactos-menu a {
    color: var(--branco);
    min-height: 32px;
}

.painel-menu .btn {
    margin-top: var(--e3);
    width: 100%;
}

.veu {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(16, 27, 51, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    display: none;
}

.veu[data-aberto='true'] {
    opacity: 1;
    pointer-events: auto;
}

body[data-menu-aberto='true'] {
    overflow: hidden;
}

.barra-accao {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: none;
    gap: var(--e1);
    padding: var(--e1);
    padding-bottom: calc(var(--e1) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--linha);
}

.barra-accao .btn {
    flex: 1;
    min-height: 48px;
    padding-inline: var(--e2);
    font-size: var(--t-pequeno);
}


/* =========================================================================
   12. (RESPONSIVIDADE: ver secção 22, no fim do ficheiro)
   ========================================================================= */


/* =========================================================================
   13. MOVIMENTO, IMPRESSÃO E ALTO CONTRASTE
   ========================================================================= */

@keyframes subir {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aproximar {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}

@keyframes crescer-filete {
    from {
        flex-basis: 0;
    }
    to {
        flex-basis: 26px;
    }
}

.heroi .envelope>*:not(.slides),
.slide.activo>* {
    animation: subir 800ms cubic-bezier(.2, .7, .2, 1) both;
}

.heroi .envelope> :nth-child(2),
.slide.activo> :nth-child(2) {
    animation-delay: 120ms;
}

.heroi .envelope> :nth-child(3),
.slide.activo> :nth-child(3) {
    animation-delay: 240ms;
}

.heroi .envelope> :nth-child(4),
.slide.activo> :nth-child(4) {
    animation-delay: 360ms;
}

.heroi .envelope> :nth-child(n+5) {
    animation-delay: 480ms;
}

.heroi .chapa::before {
    animation: crescer-filete 700ms 300ms ease-out both;
}

.heroi>.heroi-foto {
    animation: aproximar 14s cubic-bezier(.2, .6, .2, 1) both;
}


/* revelar ao rolar (ativado pelo animacoes.js) */

.animar [data-revelar] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 800ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--atraso, 0ms);
}

.animar [data-revelar].revelado {
    opacity: 1;
    transform: none;
}

.animar .foto-seccao[data-revelar] {
    transform: translateY(28px) scale(.97);
}

.animar .foto-seccao[data-revelar].revelado {
    transform: none;
}

.animar [data-revelar] .chapa::before,
.animar .cabeca-seccao[data-revelar] .chapa::before {
    flex-basis: 0;
    transition: flex-basis 600ms 250ms ease-out;
}

.animar .revelado .chapa::before {
    flex-basis: 26px;
}

.cartao-foto {
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.cartao-sector:hover .cartao-foto,
.cartao-sector:focus-visible .cartao-foto {
    transform: scale(1.07);
}

.lista-solucoes .seta {
    transition: transform var(--transicao);
}

.lista-solucoes a:hover .seta,
.lista-solucoes a:focus-visible .seta {
    transform: translateX(5px);
}

.lista-solucoes a:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .painel-menu {
        transition: none;
    }
}

@media print {
    .animar [data-revelar] {
        opacity: 1 !important;
        transform: none !important;
    }
    .cabecalho,
    .barra-contactos,
    .barra-accao,
    .painel-menu,
    .veu,
    .btn-menu,
    .whatsapp-flutuante {
        display: none !important;
    }
    body {
        padding-bottom: 0;
    }
    .seccao {
        padding-block: var(--e4);
    }
    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: .8em;
    }
}

@media (forced-colors: active) {
    .btn {
        border: 2px solid currentColor;
    }
    .cartao {
        border: 1px solid currentColor;
    }
}


/* =========================================================================
   14. COMPONENTES DA PÁGINA INICIAL
   ========================================================================= */

.heroi--imagem {
    background-color: var(--azul-profundo);
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 10px);
}

.heroi-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heroi--imagem::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(16, 27, 51, .80) 0%, rgba(16, 27, 51, .72) 45%, rgba(16, 27, 51, .66) 69%, rgba(16, 27, 51, .22) 85%, rgba(16, 27, 51, 0) 100%);
}

.heroi--imagem>.envelope {
    position: relative;
    z-index: 2;
}

.heroi--imagem,
.heroi--imagem p:not(.chapa),
.heroi--imagem .tira-factos span {
    color: rgba(255, 255, 255, .92);
}

.heroi--imagem .chapa {
    color: var(--branco);
}

.heroi--imagem .slides-ponto span {
    background: rgba(255, 255, 255, .7);
}

.heroi--imagem .slides-ponto[aria-current='true'] span {
    background: var(--branco);
}


/* fotos do carrossel */

.heroi-fotos .heroi-foto {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 600ms ease;
}

.heroi-fotos .heroi-foto.activo {
    opacity: 1;
    transform: scale(1);
}

.heroi .titulo-heroi {
    font-size: var(--t-heroi);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--branco);
    max-width: 18ch;
}

.titulo-heroi .linha {
    display: block;
}

.slides {
    display: grid;
}

.slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms ease, visibility 0s linear 500ms;
}

.slide.activo {
    opacity: 1;
    visibility: visible;
    transition: opacity 500ms ease;
}

.slides-controlos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e1);
    margin-top: var(--e5);
}

.slides-seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    padding: 0;
    color: var(--branco);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transicao);
}

.slides-seta:hover {
    background: rgba(255, 255, 255, .12);
}

.slides-seta .icone {
    width: 20px;
    height: 20px;
}

.slides-pontos {
    display: flex;
}

.slides-ponto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: var(--alvo-toque);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.slides-ponto span {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .55);
    transition: width var(--transicao), background var(--transicao);
}

.slides-ponto[aria-current='true'] span {
    width: 26px;
    background: var(--bronze-claro);
}

.tira-factos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3) 0;
    margin-top: var(--e8);
    padding-top: var(--e3);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.tira-factos div {
    padding-right: var(--e5);
    margin-right: var(--e5);
    border-right: 1px solid rgba(255, 255, 255, .14);
}

.tira-factos div:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}

.tira-factos b {
    display: block;
    font-family: var(--tipo-titulo);
    font-size: var(--t-corpo);
    font-weight: 600;
    color: var(--branco);
}

.tira-factos span {
    font-size: var(--t-pequeno);
    color: var(--texto-sobre-escuro);
}


/* cartão de sector (foto + botão "Saber mais") */

.cartao-sector {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 28px;
    border-radius: var(--raio);
    overflow: hidden;
    text-decoration: none;
    color: var(--branco);
    background-color: var(--azul-marinho);
    background-image: linear-gradient(180deg, rgba(16, 27, 51, .30) 30%, rgba(16, 27, 51, .92) 100%), repeating-linear-gradient(135deg, rgba(211, 47, 47, .14) 0 12px, rgba(211, 47, 47, .04) 12px 24px);
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.cartao-sector:hover,
.cartao-sector:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sombra-painel);
}

.cartao-sector .icone {
    margin-bottom: auto;
}

.cartao-sector h3 {
    color: var(--branco);
    font-size: var(--t-cartao);
    margin-bottom: 8px;
}

.cartao-sector p {
    font-size: var(--t-pequeno);
    color: rgba(255, 255, 255, .85);
    margin: 0 0 14px;
}

.cartao-sector .filete {
    width: 34px;
    height: 2px;
    background: var(--bronze-claro);
    margin: 0 0 18px;
    transition: width var(--transicao);
}

.cartao-sector:hover .filete {
    width: 64px;
}

.cartao-sector .btn.btn--contorno-claro {
    align-self: flex-start;
    padding: 10px 20px;
    min-height: 0;
    font-size: var(--t-pequeno);
    border-width: 1.5px;
    pointer-events: none;
    /* o cartão inteiro é o link */
}

.cartao-sector:hover .btn.btn--contorno-claro,
.cartao-sector:focus-visible .btn.btn--contorno-claro {
    background: var(--branco);
    color: var(--azul-marinho);
    border-color: var(--branco);
}

.cartao-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cartao-sector:has(.cartao-foto)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 27, 51, .35) 0%, rgba(16, 27, 51, .70) 55%, rgba(16, 27, 51, .92) 100%);
}

.cartao-sector:has(.cartao-foto)> :not(.cartao-foto) {
    position: relative;
    z-index: 2;
}


/* cartão de sector compacto (fundo branco) */

.cartao--sector-compacto {
    min-height: 140px;
    justify-content: flex-start;
    background: var(--branco);
    border: 1px solid var(--linha);
    padding: var(--e4);
}

.cartao--sector-compacto:hover {
    border-color: var(--bronze);
}

.cartao--sector-compacto .icone {
    color: var(--bronze);
    background: var(--branco);
    box-shadow: 0 6px 18px rgba(16, 27, 51, .10), 0 0 0 1px rgba(16, 27, 51, .04);
}

.cartao--sector-compacto:hover .icone {
    color: var(--branco);
    background: var(--bronze);
}

.cartao--sector-compacto h3 {
    color: var(--azul-marinho);
    font-size: var(--t-cartao);
    margin-top: var(--e2);
}

.cartao--sector-compacto .seguir {
    margin-top: auto;
    padding-top: var(--e2);
    font-weight: 600;
    font-size: var(--t-pequeno);
    color: var(--azul-aco);
}

.pilares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    margin-top: var(--e6);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .16);
}

.pilar {
    background: var(--azul-marinho);
    padding: var(--e3);
}

.pilar h3 {
    color: var(--branco);
    font-size: var(--t-cartao);
    margin: var(--e2) 0 6px;
}

.pilar p {
    font-size: var(--t-pequeno);
    color: var(--texto-sobre-escuro);
    margin: 0;
}

.grelha-porque {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--e5) var(--e4);
}

.porque {
    border-top: 2px solid var(--bronze);
    padding-top: var(--e2);
}

.porque h3 {
    font-size: var(--t-cartao);
    margin-bottom: 6px;
}

.porque p {
    font-size: var(--t-pequeno);
    color: var(--texto-secundario);
    margin: 0;
}

.faixa-sustentabilidade {
    background: var(--cinzento-aco);
    border-block: 1px solid var(--linha);
    padding-block: var(--e8);
}

.faixa-sustentabilidade .envelope {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--e4);
    align-items: center;
}

.faixa-sustentabilidade .icone {
    width: 46px;
    height: 46px;
    color: var(--bronze);
}

.faixa-sustentabilidade p {
    color: var(--texto-secundario);
    margin: 6px 0 0;
    max-width: 70ch;
}


/* apelo final (escuro por omissão) */

.apelo-final {
    background: var(--azul-profundo);
    color: var(--texto-sobre-escuro);
    text-align: center;
}

.apelo-final .envelope {
    max-width: 780px;
}

.apelo-final h2 {
    color: var(--branco);
}

.apelo-final .chapa {
    justify-content: center;
}

.apelo-final .grupo-botoes {
    justify-content: center;
    margin-top: var(--e4);
}

.apelo-final .promessa {
    margin-top: var(--e3);
    font-family: var(--tipo-corpo);
    font-size: var(--t-etiqueta);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bronze-claro);
}


/* ícones */

.icone {
    fill: currentColor;
    stroke: none;
}

.icone.icone-linha {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cartao .icone,
.cartao-sector .icone,
.pilar .icone {
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    padding: 16px;
    border-radius: 50%;
    transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.cartao .icone {
    color: var(--bronze);
    background: var(--branco);
    box-shadow: 0 6px 18px rgba(16, 27, 51, .10), 0 0 0 1px rgba(16, 27, 51, .04);
}

.cartao--ligacao:hover .icone,
.cartao--ligacao:focus-visible .icone {
    color: var(--branco);
    background: var(--bronze);
    box-shadow: 0 8px 22px rgba(211, 47, 47, .35);
    transform: scale(1.05);
}

.cartao-sector .icone {
    width: 52px;
    height: 52px;
    padding: 13px;
    color: var(--branco);
    background: var(--bronze);
    box-shadow: 0 6px 16px rgba(16, 27, 51, .30);
}

.cartao-sector:hover .icone,
.cartao-sector:focus-visible .icone {
    transform: scale(1.08);
}

.pilar .icone {
    color: var(--bronze-claro);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.grelha--5 {
    grid-template-columns: repeat(5, 1fr);
}


/* =========================================================================
   15. COMPONENTES DAS PÁGINAS INTERIORES
   ========================================================================= */

.heroi.seccao--compacta {
    padding-block: var(--e8) var(--e6);
}

.heroi.seccao--compacta h1 {
    max-width: 20ch;
}

aside .cartao {
    background: var(--cinzento-aco);
}

.lista-solucoes {
    list-style: none;
    margin: var(--e4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--e2);
}

.lista-solucoes a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--e2);
    align-items: start;
    padding: var(--e3);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.lista-solucoes a:hover {
    border-color: var(--bronze);
    box-shadow: var(--sombra-cartao);
}

.lista-solucoes .icone {
    width: 32px;
    height: 32px;
    color: var(--bronze);
}

.lista-solucoes h3 {
    margin: 0 0 4px;
}

.lista-solucoes p {
    margin: 0;
    font-size: var(--t-pequeno);
    color: var(--texto-secundario);
}

.lista-solucoes .seta {
    align-self: center;
    font-weight: 600;
    color: var(--azul-aco);
}

.lista-solucoes .remissao {
    display: block;
    margin-top: 6px;
    font-size: var(--t-pequeno);
    font-weight: 600;
    color: var(--azul-aco);
}

.lista-solucoes a:hover .remissao {
    text-decoration: underline;
}

.lista-solucoes a:has(.cartao-solucao-miniatura) {
    overflow: hidden;
    align-items: center;
}

.cartao-solucao-miniatura {
    position: relative;
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 168px;
    min-height: 120px;
    margin: calc(-1 * var(--e3)) 0 calc(-1 * var(--e3)) calc(-1 * var(--e3));
    overflow: hidden;
    background: var(--azul-profundo);
}

.cartao-solucao-miniatura::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(16, 27, 51, .52) 0, rgba(16, 27, 51, .52) 26px, rgba(16, 27, 51, .10) 100%);
}

.cartao-solucao-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicao);
}

.lista-solucoes a:hover .cartao-solucao-foto {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .lista-solucoes a:hover .cartao-solucao-foto {
        transform: none;
    }
}

.lista-solucoes .cartao-solucao-miniatura .icone {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    color: var(--branco);
}

.lista-solucoes--grelha {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
}

.exemplos {
    margin-top: var(--e6);
    padding-top: var(--e4);
    border-top: 1px solid var(--linha);
}

.lista-marcada--colunas {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e1) var(--e4);
}

.lista-sectores {
    gap: 0;
}

.lista-sectores a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    font-weight: 600;
}

.lista-sectores li::before {
    top: 50%;
}

.mapa {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-top: var(--e2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--cinzento-aco);
}

.mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =========================================================================
   16. CABEÇALHO SOBRE O HERÓI + ANIMAÇÃO AO ROLAR
   Ativado por <body class="pagina-inicial">. A classe "cabecalho-rolado"
   é adicionada ao <body> pelo script no fim da página.
   ========================================================================= */


/* variáveis de estado */

.pagina-inicial {
    --altura-barra: 38px;
    --altura-nav: 88px;
    --pw: 380px;
    /* largura do painel branco do logótipo */
    --logo-h: 56px;
    --inc: 56px;
    /* inclinação do corte diagonal */
    --borda-painel: 12px;
    /* espessura da faixa na diagonal */
    --logo-x: 115px;
    /* afastamento do logótipo à esquerda (antes do scroll) */
    --extra: var(--altura-barra);
    --cor-cab: var(--branco);
    --sub-cab: var(--branco);
    --borda-cab: rgba(255, 255, 255, .45);
    --ease-cab: 480ms cubic-bezier(.2, .7, .2, 1);
}

.pagina-inicial.cabecalho-rolado {
    --altura-nav: 76px;
    --pw: 290px;
    --logo-h: 46px;
    --inc: 0px;
    --extra: 0px;
    --logo-x: var(--margem-lateral);
    --cor-cab: var(--azul-marinho);
    --sub-cab: var(--bronze);
    --borda-cab: var(--linha);
}

.pagina-inicial [id] {
    scroll-margin-top: 120px;
}


/* barra de contactos: fixa no topo */

.pagina-inicial .barra-contactos {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 61;
    height: var(--altura-barra);
}

.pagina-inicial .barra-contactos .envelope {
    max-width: none;
    height: 100%;
    min-height: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-left: calc(var(--pw) - 10px);
    /* deixa espaço ao painel do logótipo */
    padding-right: var(--margem-lateral);
    transition: padding-left var(--ease-cab);
}

.pagina-inicial.cabecalho-rolado .barra-contactos .envelope {
    padding-left: var(--margem-lateral);
}

.sociais-topo {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--e1);
}

.barra-contactos .sociais-topo a {
    justify-content: center;
    width: 34px;
    min-height: 44px;
}

.barra-contactos .sociais-topo a:hover {
    color: var(--bronze-claro);
    text-decoration: none;
}

.barra-contactos .sociais-topo .icone {
    width: 16px;
    height: 16px;
    margin-right: 0;
    color: inherit;
}


/* cabeçalho: transparente sobre o herói, branco depois de rolar */

.pagina-inicial .cabecalho {
    position: fixed;
    top: var(--altura-barra);
    left: 0;
    right: 0;
    z-index: 62;
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    transition: background-color var(--ease-cab), box-shadow var(--ease-cab);
}

.pagina-inicial .cabecalho.com-sombra {
    box-shadow: none;
}


/* degradê escuro atrás dos links, só no topo */

.pagina-inicial .cabecalho::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 12, 18, .55) 0%, rgba(10, 12, 18, 0) 100%);
    opacity: 1;
    transition: opacity var(--ease-cab);
}

.pagina-inicial.cabecalho-rolado .cabecalho,
.pagina-inicial.cabecalho-rolado .cabecalho.com-sombra {
    background-color: var(--branco);
    box-shadow: 0 8px 28px rgba(16, 27, 51, .14);
}

.pagina-inicial.cabecalho-rolado .cabecalho::before {
    opacity: 0;
}

.pagina-inicial .cabecalho .envelope {
    max-width: none;
    height: var(--altura-nav);
    min-height: 0;
    gap: var(--e3);
    padding-left: var(--pw);
    padding-right: var(--margem-lateral);
    transition: height var(--ease-cab), padding-left var(--ease-cab);
}


/* logótipo num painel branco com corte diagonal + faixa de borda */

.pagina-inicial .marca {
    position: absolute;
    z-index: 0;
    left: 0;
    top: calc(-1 * var(--extra));
    width: var(--pw);
    height: calc(var(--extra) + var(--altura-nav));
    padding-left: var(--logo-x);
    background: transparent;
    transition: top var(--ease-cab), width var(--ease-cab), height var(--ease-cab), padding-left var(--ease-cab);
}

.pagina-inicial .marca::before {
    /* painel branco (cortado na diagonal) */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--branco);
    clip-path: polygon(0 0, calc(100% - var(--inc)) 0, 100% 100%, 0 100%);
    transition: clip-path var(--ease-cab);
}

.pagina-inicial .marca::after {
    /* faixa translúcida ao longo da diagonal */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(100% + var(--borda-painel));
    z-index: -2;
    background: #cac8b4b8;
    clip-path: polygon(calc(100% - var(--borda-painel) - var(--inc)) 0, calc(100% - var(--inc)) 0, 100% 100%, calc(100% - var(--borda-painel)) 100%);
    opacity: 1;
    transition: opacity var(--ease-cab), clip-path var(--ease-cab);
}

.pagina-inicial.cabecalho-rolado .marca::after {
    opacity: 0;
}

.pagina-inicial .marca img {
    height: var(--logo-h);
    width: auto;
    transition: height var(--ease-cab);
}


/* navegação centrada, com sublinhado na altura total da barra */

.pagina-inicial .navegacao {
    flex: 1;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-self: stretch;
}

.pagina-inicial .navegacao ul {
    align-items: stretch;
}

.pagina-inicial .navegacao>ul>li {
    display: flex;
}

.pagina-inicial .navegacao>ul>li>a {
    color: var(--cor-cab);
    border-bottom: 3px solid transparent;
    padding-inline: 2px;
    transition: color var(--ease-cab), border-color 300ms ease;
}

.pagina-inicial .navegacao>ul>li>a:hover,
.pagina-inicial .navegacao>ul>li>a[aria-current='page'] {
    color: var(--cor-cab);
    border-bottom-color: var(--sub-cab);
}


/* botão de orçamento no cabeçalho */

.pagina-inicial .cabecalho .envelope>.btn--cotacao {
    flex-shrink: 0;
    padding: 12px 24px;
    white-space: nowrap;
}


/* responsivo */


/* =========================================================================
   17. APELO FINAL — variantes (branca e preta com brilhos)
   ========================================================================= */

.apelo-final--clara {
    background: var(--branco);
    color: var(--texto-secundario);
    border-top: 1px solid var(--linha);
}

.apelo-final--clara h2 {
    color: var(--azul-marinho);
}

.apelo-final--clara .chapa {
    color: var(--bronze-texto);
}

.apelo-final--clara .chapa::before {
    background: var(--bronze);
}

.apelo-final--clara .promessa {
    color: var(--bronze-texto);
}

.apelo-final--escura {
    position: relative;
    overflow: hidden;
    background: #14161C;
    color: var(--texto-sobre-escuro);
    padding-block: 96px;
}

.apelo-final--escura::before,
.apelo-final--escura::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

.apelo-final--escura::before {
    width: 720px;
    height: 720px;
    right: -160px;
    top: -160px;
    background: #D32F2F;
    opacity: .28;
}

.apelo-final--escura::after {
    width: 520px;
    height: 520px;
    right: 240px;
    bottom: -220px;
    background: #8E2418;
    opacity: .22;
}

.apelo-final--escura>.envelope {
    position: relative;
    z-index: 1;
}


/* =========================================================================
   18. HERÓI PROFISSIONAL, IMAGENS E ANIMAÇÕES
   ========================================================================= */


/* herói: ecrã quase inteiro, texto à esquerda */

.heroi--pro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 720px;
    min-height: max(720px, min(100svh, 940px));
}

.pagina-inicial .heroi--pro {
    padding-top: calc(126px + 48px);
    padding-bottom: 128px;
}

.heroi--pro>.envelope {
    max-width: 1320px;
}


/* camadas de sobreposição: texto legível + fundo em degradê */

.heroi--pro.heroi--imagem::before {
    background: linear-gradient(0deg, rgba(10, 12, 18, .88) 0%, rgba(10, 12, 18, 0) 38%), linear-gradient(100deg, rgba(10, 12, 18, .90) 0%, rgba(10, 12, 18, .74) 38%, rgba(10, 12, 18, .34) 72%, rgba(10, 12, 18, .12) 100%);
}


/* Ken Burns contínuo nas fotos (sem saltos ao mudar de slide) */

@keyframes kenburns {
    from {
        transform: scale(1.16) translate3d(-1.5%, 1%, 0);
    }
    to {
        transform: scale(1.02) translate3d(1.2%, -1%, 0);
    }
}

.heroi--pro .heroi-fotos .heroi-foto,
.heroi--pro .heroi-fotos .heroi-foto.activo {
    transform: scale(1.16);
    transition: opacity 1000ms ease;
    animation: kenburns 22s ease-in-out infinite alternate;
    will-change: transform, opacity;
}


/* brilhos vermelho/dourado a derivar suavemente */

@keyframes deriva {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-6vw, -5vw, 0) scale(1.18);
    }
}

.heroi-brilho {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.heroi-brilho::before,
.heroi-brilho::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.heroi-brilho::before {
    width: 48vw;
    height: 48vw;
    right: -14vw;
    bottom: -26vw;
    background: #D32F2F;
    opacity: .34;
    animation: deriva 18s ease-in-out infinite alternate;
}

.heroi-brilho::after {
    width: 36vw;
    height: 36vw;
    right: 20vw;
    top: -26vw;
    background: #F5A623;
    opacity: .13;
    animation: deriva 24s ease-in-out infinite alternate-reverse;
}


/* tipografia do herói */

.heroi--pro .titulo-heroi {
    font-size: clamp(2.5rem, 1.35rem + 4.3vw, 4.9rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    max-width: 15ch;
    margin-bottom: var(--e3);
}

.heroi--pro .titulo-heroi .linha {
    background: linear-gradient(90deg, #FFFFFF 0%, #F5A623 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.heroi--pro .slide .chapa {
    margin-bottom: var(--e3);
    color: var(--bronze-claro);
}

.heroi--pro .slide>p:not(.chapa) {
    font-size: clamp(1.05rem, .95rem + .55vw, 1.4rem);
    max-width: 52ch;
    margin-bottom: 0;
}

.heroi--pro .grupo-botoes {
    margin-top: var(--e5);
}

.heroi--pro .grupo-botoes .btn {
    padding: 16px 34px;
    border-radius: 999px;
}


/* cartões de vidro com contadores */

.tira-factos--vidro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 64px;
    padding-top: 0;
    border-top: 0;
}

.tira-factos--vidro>div,
.tira-factos--vidro>div:last-child {
    margin: 0;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform var(--transicao), background var(--transicao), border-color var(--transicao);
}

.tira-factos--vidro>div:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(245, 166, 35, .55);
}

.tira-factos--vidro .num {
    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--branco);
}

.tira-factos--vidro span {
    display: block;
    line-height: 1.4;
}


/* indicador de rolagem */

@keyframes rolar {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(16px);
    }
}

.heroi-rolar {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 24px;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
}

.heroi-rolar span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--branco);
    animation: rolar 1.8s ease-in-out infinite;
}


/* cartões de soluções com imagem */

.cartao--imagem {
    padding: 0 0 12px;
    overflow: hidden;
    gap: var(--e2);
}

.cartao-media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.cartao-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0) 55%, rgba(10, 12, 18, .35) 100%);
}

.cartao-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.cartao--imagem:hover .cartao-media img {
    transform: scale(1.09);
}

.cartao--imagem>.icone {
    margin: -48px 0 0 28px;
    position: relative;
    z-index: 2;
}

.cartao--imagem>h3,
.cartao--imagem>p,
.cartao--imagem>.seguir {
    margin-inline: 28px;
}

.cartao--imagem>.seguir {
    padding-top: 0;
}


/* responsivo */

@media (prefers-reduced-motion: reduce) {
    .heroi--pro .heroi-fotos .heroi-foto,
    .heroi-brilho::before,
    .heroi-brilho::after,
    .heroi-rolar span {
        animation: none;
    }
}


/* =========================================================================
   19. CARTÕES DE MISSÃO E VISÃO
   ========================================================================= */

.cartao-mv {
    position: relative;
    overflow: hidden;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 16px;
    padding: 40px 36px 36px;
    box-shadow: 0 1px 3px rgba(16, 27, 51, .05), 0 16px 40px rgba(16, 27, 51, .06);
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.cartao-mv:hover {
    transform: translateY(-4px);
    border-color: rgba(211, 47, 47, .25);
    box-shadow: 0 1px 3px rgba(16, 27, 51, .05), 0 24px 60px rgba(16, 27, 51, .12);
}

.cartao-mv-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 28px;
    border-radius: 14px;
    background: rgba(211, 47, 47, .08);
    color: var(--bronze);
}

.cartao-mv-icone--missao {
    background: rgba(245, 166, 35, .14);
    color: #C77800;
}

.cartao-mv-icone .icone {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.cartao-mv-icone .icone-fantasma {
    /* ícone gigante translúcido ao fundo */
    position: absolute;
    right: -170px;
    top: -40px;
    width: 260px;
    height: 260px;
    color: rgba(211, 47, 47, .07);
    fill: currentColor;
    z-index: 0;
    pointer-events: none;
}

.cartao-mv-icone--missao .icone-fantasma {
    color: rgba(245, 166, 35, .12);
}

.cartao-mv h3 {
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--azul-marinho);
    margin: 0 0 16px;
    max-width: 34ch;
}

.cartao-mv-texto {
    color: var(--texto-secundario);
    margin: 0;
    max-width: 46ch;
}


/* =========================================================================
   20. PAINEL "O QUE ESTÁ INCLUÍDO" — pílulas e cartões com número
   ========================================================================= */

.painel-incluido {
    margin-top: 32px;
    padding: 28px;
    background: var(--cinzento-aco);
    border: 1px solid var(--linha);
    border-radius: 16px;
}

.painel-incluido-titulo {
    margin: 0 0 16px;
    font-family: var(--tipo-corpo);
    font-size: var(--t-etiqueta);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-secundario);
}

.lista-pilulas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-pilulas li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 999px;
    font-size: var(--t-pequeno);
    font-weight: 500;
    color: var(--azul-marinho);
    transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.lista-pilulas li:hover {
    border-color: var(--bronze);
    transform: translateY(-2px);
    box-shadow: var(--sombra-cartao);
}

.lista-pilulas .ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bronze);
    flex-shrink: 0;
}

.cartao-numero {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 16px;
    transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.cartao-numero:hover {
    border-color: var(--bronze);
    transform: translateY(-2px);
    box-shadow: var(--sombra-cartao);
}

.cartao-numero b {
    font-family: var(--tipo-titulo);
    font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--azul-marinho);
    letter-spacing: -.02em;
}

.cartao-numero span {
    font-size: var(--t-pequeno);
    color: var(--texto-secundario);
}


/* =========================================================================
   21. DROPDOWN DE SOLUÇÕES — mega menu com cartões (estilo Onfon Media)
   Cada item tem a sua própria cor (variável --c) no ícone.
   ========================================================================= */

.navegacao>ul>li.tem-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.navegacao .seta-dropdown {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    fill: currentColor;
    transition: transform var(--transicao);
}

.navegacao>ul>li.tem-dropdown:hover .seta-dropdown,
.navegacao>ul>li.tem-dropdown:focus-within .seta-dropdown {
    transform: rotate(180deg);
}

.dropdown-solucoes {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 70;
    width: min(880px, calc(100vw - 48px));
    padding: 24px;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgb(31, 99, 109), 0 4px 12px rgba(16, 27, 51, .06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

.navegacao>ul>li.tem-dropdown:hover .dropdown-solucoes,
.navegacao>ul>li.tem-dropdown:focus-within .dropdown-solucoes {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}

.dropdown-solucoes-grelha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.dropdown-item {
    --c: var(--bronze);
    /* cor do item (vermelho por omissão) */
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background var(--transicao), transform var(--transicao);
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: var(--cinzento-aco);
    transform: translateX(2px);
}


/* paleta: uma cor por item, repetida a cada 8 */

.dropdown-item:nth-child(8n+1) {
    --c: #D32F2F;
}


/* vermelho  */

.dropdown-item:nth-child(8n+2) {
    --c: #F57C00;
}


/* laranja   */

.dropdown-item:nth-child(8n+3) {
    --c: #1E88E5;
}


/* azul      */

.dropdown-item:nth-child(8n+4) {
    --c: #2E9D5B;
}


/* verde     */

.dropdown-item:nth-child(8n+5) {
    --c: #8E4FD6;
}


/* roxo      */

.dropdown-item:nth-child(8n+6) {
    --c: #00897B;
}


/* turquesa  */

.dropdown-item:nth-child(8n+7) {
    --c: #E0457B;
}


/* rosa      */

.dropdown-item:nth-child(8n+8) {
    --c: #C79200;
}


/* dourado   */

.dropdown-icone {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 54px;
    border-radius: 12px;
    background: rgba(211, 47, 47, .10);
    /* alternativa para browsers antigos */
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

.dropdown-item:hover .dropdown-icone,
.dropdown-item:focus-visible .dropdown-icone {
    background: var(--c);
    color: var(--branco);
    transform: scale(1.06);
}

.dropdown-icone svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
}


/* o SVG herda a cor do item (--c) */

.dropdown-icone svg path {
    fill: currentColor;
}

.dropdown-texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dropdown-texto b {
    font-family: var(--tipo-titulo);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--azul-marinho);
    line-height: 1.25;
}

.dropdown-texto span {
    font-size: .92rem;
    color: var(--texto-secundario);
    line-height: 1.4;
}


/* =========================================================================
   22. RESPONSIVIDADE — sistema único (substitui todas as @media de largura)
   Pontos de quebra: 1399 · 1199 · 1099 · 767 · 559 · 379
   - espaçamentos laterais e verticais são fluidos (clamp, na raiz)
   - ≤1099: menu em ecrã inteiro, grelhas a 2 colunas
   - ≤767 : cabeçalho flutuante em "pílula", cartões em carrossel
            deslizante, rodapé compacto e barra de ações fixa
   ========================================================================= */


/* ---------- portátil (1100–1399) ---------- */

@media (max-width: 1399px) {
    .pagina-inicial {
        --pw: 340px;
        --logo-h: 48px;
        --inc: 44px;
        --logo-x: 70px;
    }
    .pagina-inicial.cabecalho-rolado {
        --pw: 270px;
        --logo-h: 42px;
        --inc: 0px;
    }
    .pagina-inicial .barra-contactos .horario {
        display: none;
    }
    .pagina-inicial .barra-contactos .selector-idioma.separa {
        margin-left: auto;
    }
    .colunas-rodape {
        gap: 48px;
    }
}

@media (max-width: 1199px) {
    .pagina-inicial {
        --pw: 310px;
        --logo-h: 46px;
        --inc: 40px;
        --logo-x: 50px;
    }
    .pagina-inicial.cabecalho-rolado {
        --pw: 260px;
        --logo-h: 42px;
    }
    .navegacao ul {
        gap: var(--e2);
    }
    .navegacao a {
        white-space: nowrap;
    }
    .pagina-inicial .cabecalho .envelope {
        gap: var(--e2);
    }
    .heroi--imagem::before {
        background: linear-gradient(90deg, rgba(16, 27, 51, .80) 0%, rgba(16, 27, 51, .66) 80%, rgba(16, 27, 51, .35) 100%);
    }
}


/* ---------- tablet e abaixo (≤1099): menu em ecrã inteiro ---------- */

@media (max-width: 1099px) {
    /* navegação */
    .navegacao,
    .pagina-inicial .navegacao {
        display: none;
    }
    .btn-menu {
        display: flex;
    }
    .cabecalho .btn--cotacao {
        display: none;
    }
    .cabecalho .envelope {
        min-height: 76px;
        gap: var(--e2);
    }
    .pagina-inicial {
        --altura-nav: 76px;
        --pw: 280px;
        --logo-h: 44px;
        --inc: 36px;
        --logo-x: 24px;
        --borda-painel: 10px;
    }
    .pagina-inicial.cabecalho-rolado {
        --altura-nav: 68px;
        --pw: 240px;
        --logo-h: 40px;
    }
    .pagina-inicial .cabecalho .envelope {
        padding-left: var(--margem-lateral);
    }
    .pagina-inicial .barra-contactos a[href^="mailto"],
    .pagina-inicial .barra-contactos .sociais-topo {
        display: none;
    }
    .pagina-inicial .btn-menu {
        border-color: var(--borda-cab);
        transition: border-color var(--ease-cab);
    }
    .pagina-inicial .btn-menu span,
    .pagina-inicial .btn-menu span::before,
    .pagina-inicial .btn-menu span::after {
        background: var(--cor-cab);
    }
    .pagina-inicial .btn-menu[aria-expanded='true'] span {
        background: transparent;
    }
    /* menu: folha em ecrã inteiro com entrada suave */
    .painel-menu {
        display: block;
        inset: 0;
        width: 100%;
        padding: 18px var(--margem-lateral) 40px;
        background: radial-gradient(120% 55% at 100% 0, rgba(211, 47, 47, .24), transparent 60%), #14161C;
        box-shadow: none;
        transform: translateY(-14px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms;
    }
    .painel-menu[data-aberto='true'] {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 260ms ease, transform 260ms ease, visibility 0s;
    }
    .painel-menu nav>ul>li {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .painel-menu nav a,
    .painel-menu details>summary {
        min-height: 62px;
        font-family: var(--tipo-titulo);
        font-size: 1.45rem;
        font-weight: 700;
    }
    .painel-menu details ul {
        padding-bottom: var(--e2);
    }
    .painel-menu details a {
        min-height: 48px;
        font-family: var(--tipo-corpo);
        font-size: 1.02rem;
        font-weight: 500;
    }
    .painel-menu .contactos-menu {
        padding: 18px 20px;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 16px;
        background: rgba(255, 255, 255, .04);
    }
    .painel-menu .btn {
        min-height: 54px;
        border-radius: 999px;
        margin-top: 20px;
    }
    /* herói */
    .pagina-inicial .heroi--pro {
        padding-top: calc(114px + 36px);
        padding-bottom: 112px;
    }
    .heroi {
        padding-block: var(--e8);
    }
    .heroi h1 {
        max-width: 22ch;
    }
    .heroi--imagem::before {
        background: linear-gradient(90deg, rgba(16, 27, 51, .76) 0%, rgba(16, 27, 51, .66) 100%);
    }
    .tira-factos--vidro {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 48px;
    }
    /* grelhas */
    .grelha--3,
    .grelha--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grelha--5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grelha-porque {
        grid-template-columns: repeat(2, 1fr);
    }
    .faixa {
        padding: var(--e5);
    }
    .faixa-sustentabilidade .envelope {
        grid-template-columns: auto 1fr;
    }
    .faixa-sustentabilidade .btn {
        grid-column: 2;
        justify-self: start;
    }
    .cartoes-opcao {
        grid-template-columns: repeat(2, 1fr);
    }
    .migalhas {
        padding-block: 2px;
    }
    .migalhas a {
        display: inline-flex;
        align-items: center;
        min-height: var(--alvo-toque);
    }
    /* rodapé */
    .rodape {
        padding-block: 150px 48px;
    }
    .rodape-envelope {
        padding-inline: var(--margem-lateral);
    }
    .colunas-rodape {
        grid-template-columns: 1fr 1fr;
        gap: var(--e5);
    }
}


/* ---------- telemóvel e tablet vertical (≤767) ---------- */

@media (max-width: 767px) {
     :root {
        --barra-accao: 64px;
    }
    .barra-contactos {
        display: none;
    }
    .barra-accao {
        display: flex;
    }
    /* cabeçalho flutuante em pílula (sem faixa diagonal) */
    .pagina-inicial {
        --altura-barra: 0px;
    }
    .pagina-inicial .cabecalho {
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: 10px;
        right: 10px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 999px;
        background-color: rgba(18, 20, 26, .50);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    .pagina-inicial.cabecalho-rolado .cabecalho {
        border-color: var(--linha);
    }
    .pagina-inicial .cabecalho::before {
        display: none;
    }
    .pagina-inicial .cabecalho .envelope {
        height: 56px;
        padding: 0 8px;
        gap: 8px;
    }
    .pagina-inicial .marca {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        background: var(--branco);
        box-shadow: inset 0 0 0 1px rgba(16, 27, 51, .06);
        transition: none;
    }
    .pagina-inicial .marca::before,
    .pagina-inicial .marca::after {
        display: none;
    }
    .pagina-inicial .marca img {
        height: 24px;
    }
    .idioma-movel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        margin-left: auto;
        font-size: var(--t-pequeno);
        font-weight: 600;
        letter-spacing: .06em;
        color: var(--azul-marinho);
        text-decoration: none;
        border: 1px solid var(--linha);
        border-radius: 999px;
    }
    .idioma-movel+.btn-menu {
        margin-left: 4px;
    }
    .btn-menu {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .pagina-inicial .idioma-movel {
        color: var(--cor-cab);
        border-color: var(--borda-cab);
        transition: color var(--ease-cab), border-color var(--ease-cab);
    }
    /* herói */
    .pagina-inicial .heroi--pro {
        padding-top: calc(76px + 32px);
        padding-bottom: 80px;
        min-height: max(640px, 100svh);
    }
    .heroi--pro .titulo-heroi {
        font-size: clamp(2.15rem, 9.4vw, 3rem);
        max-width: none;
    }
    .heroi p:not(.chapa),
    .heroi--pro .slide>p:not(.chapa) {
        font-size: 1.02rem;
        margin-bottom: var(--e4);
    }
    .heroi--pro .slide>p:not(.chapa) {
        margin-bottom: 0;
    }
    .heroi {
        padding-block: var(--e6);
    }
    .heroi h1 {
        max-width: none;
    }
    .heroi--imagem::before {
        background: rgba(16, 27, 51, .66);
    }
    .heroi--pro.heroi--imagem::before {
        background: linear-gradient(0deg, rgba(10, 12, 18, .9) 0%, rgba(10, 12, 18, .1) 45%), linear-gradient(90deg, rgba(10, 12, 18, .82) 0%, rgba(10, 12, 18, .62) 100%);
    }
    .heroi-rolar {
        display: none;
    }
    .grupo-botoes {
        flex-direction: column;
        align-items: stretch;
    }
    .grupo-botoes .btn {
        width: 100%;
    }
    .tira-factos--vidro {
        gap: 10px;
        margin-top: 36px;
    }
    .tira-factos--vidro>div,
    .tira-factos--vidro>div:last-child {
        padding: 14px 16px;
    }
    .tira-factos--vidro span {
        font-size: .84rem;
    }
    .heroi.seccao--compacta {
        padding-block: var(--e5);
    }
    /* grelhas: uma coluna ... */
    .grelha--2,
    .grelha--3,
    .grelha--4 {
        grid-template-columns: 1fr;
    }
    .grelha {
        gap: var(--e2);
    }
    .grelha--larga {
        gap: var(--e3);
    }
    .grelha--5 {
        grid-template-columns: repeat(2, 1fr);
    }
    .cabeca-seccao {
        margin-bottom: var(--e4);
    }
    .cartao {
        padding: var(--e3);
    }
    /* ... exceto cartões com foto: carrossel deslizante */
    .grelha:has(> .cartao-sector),
    .grelha:has(> .cartao--imagem) {
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: min(80%, 320px);
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--margem-lateral);
        margin-inline: calc(-1 * var(--margem-lateral));
        padding: 4px var(--margem-lateral) 18px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .grelha:has(> .cartao-sector)::-webkit-scrollbar,
    .grelha:has(> .cartao--imagem)::-webkit-scrollbar {
        display: none;
    }
    .grelha>.cartao-sector,
    .grelha>.cartao--imagem {
        scroll-snap-align: start;
        min-width: 0 !important;
        flex: none !important;
    }
    .grelha>.cartao-sector {
        min-height: 340px;
    }
    /* secções */
    .faixa {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--e3);
        padding: var(--e3);
    }
    .faixa .grupo-botoes {
        margin-left: 0;
        width: 100%;
    }
    .faixa .grupo-botoes .btn {
        flex: 1;
    }
    .foto-seccao {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }
    .cartao-mv {
        padding: 32px 24px 28px;
    }
    .cartao-mv-icone .icone-fantasma {
        right: -200px;
        top: -60px;
        width: 220px;
        height: 220px;
    }
    .apelo-final--escura {
        padding-block: 72px;
    }
    .apelo-final--escura::before {
        width: 480px;
        height: 480px;
        right: -200px;
        top: -200px;
    }
    .apelo-final--escura::after {
        width: 360px;
        height: 360px;
        right: -80px;
        bottom: -180px;
    }
    .lista-solucoes--grelha {
        grid-template-columns: 1fr;
    }
    .lista-marcada--colunas {
        grid-template-columns: repeat(2, 1fr);
    }
    .lista-marcada[style*="repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* formulários */
    .par-campos {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .bloco-campos {
        padding: var(--e3);
    }
    .formulario {
        padding: var(--e3);
    }
    /* rodapé compacto */
    .rodape {
        padding-block: 100px 40px;
    }
    .rodape-logo {
        padding: 10px 24px;
    }
    .rodape-logo img {
        height: 40px;
    }
    .colunas-rodape {
        gap: 32px 24px;
        padding-bottom: 36px;
    }
    .colunas-rodape>div:last-child {
        grid-column: 1 / -1;
    }
    .rodape h4 {
        font-size: 1.1rem;
        margin-bottom: 14px;
        padding-left: 14px;
    }
    .rodape h4::before {
        height: 18px;
    }
    .rodape a,
    .rodape li>span {
        min-height: 38px;
        font-size: .95rem;
    }
    .fecho-rodape {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding-top: 28px;
    }
    .fecho-rodape .assinatura-rodape {
        margin: 0;
        padding: 10px 0 0;
        width: 100%;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
    .rodape-sociais {
        margin: 14px 0 0;
        gap: 14px;
    }
    .rodape-sociais a {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }
    .whatsapp-flutuante {
        right: 14px;
        bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px));
        width: 54px;
        height: 54px;
    }
    .whatsapp-flutuante .icone {
        width: 28px;
        height: 28px;
    }
}


/* ---------- telemóvel (≤559) ---------- */

@media (max-width: 559px) {
    .grelha--5 {
        grid-template-columns: 1fr;
    }
    .grelha-porque {
        grid-template-columns: 1fr;
        gap: var(--e4);
    }
    .tira-factos {
        flex-direction: column;
        margin-top: var(--e5);
    }
    .tira-factos div {
        border-right: 0;
        margin-right: 0;
        padding-right: 0;
    }
    .faixa-sustentabilidade .envelope {
        grid-template-columns: 1fr;
        gap: var(--e2);
    }
    .faixa-sustentabilidade .btn {
        grid-column: 1;
    }
    .cartoes-opcao {
        grid-template-columns: 1fr;
    }
    .cartao-opcao {
        min-height: 52px;
    }
    .lista-marcada--colunas {
        grid-template-columns: 1fr;
    }
    .lista-marcada[style*="repeat(3"],
    .lista-marcada[style*="repeat(2"] {
        grid-template-columns: 1fr !important;
    }
    .colunas-rodape {
        grid-template-columns: 1fr;
    }
    .logo-rodape {
        height: 52px;
    }
    .marca img {
        height: 48px;
    }
    .migalhas {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .migalhas::-webkit-scrollbar {
        display: none;
    }
    .migalhas ol {
        padding-right: var(--e3);
    }
    .campo input,
    .campo select,
    .campo textarea {
        font-size: 16px;
        min-height: 48px;
    }
    .campo textarea {
        min-height: 128px;
    }
    .bloco-campos {
        padding: var(--e3) var(--e2);
        border-inline: 0;
        border-radius: 0;
    }
    .tabela-horario,
    .tabela-horario tbody,
    .tabela-horario tr,
    .tabela-horario td,
    .tabela-horario th {
        display: block;
        width: 100%;
    }
    .tabela-horario thead {
        display: none;
    }
    .tabela-horario tr {
        border-bottom: 1px solid var(--linha);
        padding-block: var(--e2);
        display: flex;
        justify-content: space-between;
        gap: var(--e2);
    }
    .tabela-horario td,
    .tabela-horario th {
        border: 0;
        padding: 0;
    }
    .tabela-horario th {
        flex: 0 0 auto;
        width: auto;
    }
    .tabela-horario td {
        text-align: right;
        width: auto;
        flex: 1 1 auto;
    }
    .pergunta summary {
        font-size: var(--t-corpo);
    }
    .seccao--compacta {
        padding-block: var(--e5);
    }
    .apelo-final--escura {
        padding-block: 56px;
    }
    .lista-solucoes a {
        padding: var(--e2);
    }
    .lista-solucoes .icone {
        width: 26px;
        height: 26px;
    }
    .cartao-solucao-miniatura {
        width: 96px;
        min-height: 0;
        margin: calc(-1 * var(--e2)) 0 calc(-1 * var(--e2)) calc(-1 * var(--e2));
    }
    .lista-solucoes .cartao-solucao-miniatura .icone {
        width: 28px;
        height: 28px;
    }
}


/* ---------- ecrãs muito pequenos (≤379) ---------- */

@media (max-width: 379px) {
    .barra-accao .btn {
        font-size: .88rem;
        padding-inline: var(--e1);
    }
    .cartao {
        padding: var(--e2);
    }
    .pagina-inicial .marca {
        padding: 0 10px;
    }
}