/* ==========================================================================
   OBRA, sistema de design do site comercial
   ==========================================================================
   Segue o DESIGN.md da aplicacao: paleta navy + laranja, Inter no corpo e
   Plus Jakarta Sans nos titulos, cantos a 8 px em tudo (a excepcao e o
   `--raio-pill`, para badges e indicadores circulares).

   O site e claro de proposito, sem tema escuro: as ilustracoes tem fundo
   creme fixo e num tema escuro ficariam nove rectangulos claros a flutuar.

   Toda a folha e mobile-first: as media queries so acrescentam a partir de
   640 px. O piso de validacao e 360 px de largura.
   ========================================================================== */

@import url('../fonts/fontes.css');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Paleta OBRA. O navy e a cor estrutural, o laranja e a cor de accao. */
  --navy: #212e41;
  --navy-claro: #2d3c53;
  --navy-escuro: #171f2d;
  --laranja: #f87203;
  --laranja-escuro: #b84f02;
  --laranja-tenue: rgba(248, 114, 3, 0.08);

  /* Superficies e texto */
  --fundo: #ffffff;
  --fundo-2: #f3f4f7;
  --superficie: #ffffff;
  --borda: #e2e5ea;
  --borda-forte: #c8cfd9;
  --texto: #1c2433;
  --texto-suave: #677085;
  --texto-inverso: #edf0f5;

  /* Estado */
  --sucesso: #16a34a;
  --sucesso-fundo: rgba(22, 163, 74, 0.1);

  /* Forma */
  --raio: 8px;
  --raio-pill: 9999px;

  /* Profundidade. Sombras curtas e frias, nada de halos difusos. */
  --sombra-1: 0 1px 2px rgba(28, 36, 51, 0.06);
  --sombra-2: 0 4px 16px rgba(28, 36, 51, 0.08);
  --sombra-3: 0 12px 32px rgba(28, 36, 51, 0.12);

  /* Ritmo vertical das seccoes */
  --acerto: 1.5rem;
  --seccao-y: 4rem;

  --largura: 1140px;
  --transicao: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --seccao-y: 6rem;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* O cabecalho e fixo: sem isto, uma ancora deixa o titulo por baixo dele. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--navy);
  /* Titulos longos em 360 px partem palavras compridas em vez de alargar a
     pagina. "Construcao" sozinha ja passa de metade do ecra. */
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
}
h2 {
  font-size: clamp(1.625rem, 4vw, 2.5rem);
}
h3 {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O anel tem de se ver sobre os três fundos onde há elementos focáveis. O navy
   dá 13,76:1 sobre o branco e 12,4:1 sobre o cinzento; o laranja dava 2,84:1 e
   2,58:1, abaixo dos 3:1 exigidos. O caso que decide é o botão principal: o
   fundo dele é o laranja, e um anel laranja à volta de um botão laranja é 1:1,
   ou seja invisível a quem navega por teclado. No rodapé escuro é ao contrário,
   o navy morre (1,20:1) e é o laranja que serve, a 5,83:1. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--raio);
}
.rodape :focus-visible {
  outline-color: var(--laranja);
}

/* Saltar para o conteudo: primeiro tab da pagina, invisivel ate ter foco. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--texto-inverso);
  padding: 0.75rem 1.25rem;
  border-radius: var(--raio);
}
.saltar:focus {
  left: 1rem;
  top: 1rem;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: 2rem;
  }
}

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

.seccao--tenue {
  background: var(--fundo-2);
}

.seccao--navy {
  background: var(--navy);
  color: var(--texto-inverso);
}
.seccao--navy h2,
.seccao--navy h3 {
  color: #ffffff;
}

/* Um cartão com fundo próprio dentro da secção navy tem de repor a cor do
   texto: sem isto herda o #edf0f5 da secção e fica branco sobre branco. */
.seccao--navy .cartao {
  color: var(--texto);
}
.seccao--navy .cartao h2,
.seccao--navy .cartao h3 {
  color: var(--navy);
}
.seccao--navy .suave {
  color: #a6b0c2;
}

/* Cabecalho de seccao, centrado e com largura de leitura confortavel. */
.cabeca {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  text-align: center;
}
.cabeca p {
  font-size: 1.0625rem;
  color: var(--texto-suave);
  margin: 0;
}
.seccao--navy .cabeca p {
  color: #a6b0c2;
}

.etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja-escuro);
  margin-bottom: 0.75rem;
}

/* Sobre o navy o laranja da marca já passa (4,83:1) e o escuro falharia
   (2,71:1): aqui volta a ser o laranja vivo. */
.seccao--navy .etiqueta {
  color: var(--laranja);
}

.suave {
  color: var(--texto-suave);
}

.grelha {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .grelha--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grelha--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grelha--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grelha--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 959px) {
  .grelha--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4. Botoes
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 48 px de altura minima: alvo de toque confortavel num estaleiro, com luvas
     ou com o telemovel ao sol. */
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
  text-align: center;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primario {
  background: var(--laranja);
  /* Branco sobre o laranja da marca dá 2,84:1. A aplicação já resolveu isto
     com texto escuro (--primary-fg #1c2433 em globals.css): 5,48:1. O site
     passa a usar o mesmo par, sem mexer na cor da marca. */
  color: var(--texto);
  box-shadow: var(--sombra-1);
}
.btn--primario:hover {
  /* Com texto escuro por cima, escurecer o fundo derrubava o par para 4,20:1.
     O hover clareia, à maneira do `bg-primary/90` da aplicação: 6,02:1. */
  background: #f98019;
  box-shadow: var(--sombra-2);
}

.btn--secundario {
  background: var(--superficie);
  color: var(--navy);
  /* Mesmo critério dos campos do formulário: o controlo é branco sobre branco e
     a borda é a única coisa que o desenha. #808d9c dá 3,38:1 contra os 1,57:1
     de `--borda-forte`, que num formulário fica ao lado de campos já a 3,38:1. */
  border-color: #808d9c;
}
.btn--secundario:hover {
  border-color: var(--navy);
  background: var(--fundo-2);
}

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

.btn--grande {
  min-height: 56px;
  padding-inline: 2rem;
  font-size: 1rem;
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.botoes--centro {
  justify-content: center;
}

/* Em 360 px dois botoes lado a lado ficam com 4 palavras por linha cada um. */
@media (max-width: 419px) {
  .botoes > .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. Cabecalho e navegacao
   -------------------------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}

.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.marca img {
  height: 2.25rem;
  width: auto;
}

.nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.nav a {
  padding: 0.5rem 0.875rem;
  border-radius: var(--raio);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--texto-suave);
  transition: color var(--transicao), background var(--transicao);
}

.nav a:hover {
  color: var(--navy);
  background: var(--fundo-2);
}

.nav a[aria-current='page'] {
  color: var(--navy);
  font-weight: 600;
}

.topo__accoes {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  color: var(--navy);
}

/* A partir daqui cabe a navegação completa, e o botão de menu desaparece.
   Esta consulta tem de vir DEPOIS da regra base do `.menu-btn`: com a ordem
   trocada, a regra base ganhava por ser a última e o botão aparecia ao lado do
   menu completo em ecrã grande. */
@media (min-width: 900px) {
  .nav,
  .topo__accoes {
    display: flex;
  }
  .menu-btn {
    display: none;
  }
}

/* Menu de telemovel: painel completo por baixo do cabecalho. */
.menu {
  display: none;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  padding-block: 0.75rem 1.25rem;
}
.menu[data-aberto='true'] {
  display: block;
}
@media (min-width: 900px) {
  .menu {
    display: none !important;
  }
}
.menu a:not(.btn) {
  display: block;
  padding: 0.875rem 0.5rem;
  font-size: 1.0625rem;
  font-weight: 500;
  border-bottom: 1px solid var(--borda);
}
/* Abaixo de 900 px a .nav está escondida e este menu é a única navegação: sem
   isto, a página actual fica indistinguível das outras. Vem depois da regra de
   cima de propósito, para ganhar o desempate por ordem (mesma especificidade). */
.menu a[aria-current] {
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--laranja);
}
.menu .botoes {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   6. Heroi
   -------------------------------------------------------------------------- */
.heroi {
  background: linear-gradient(180deg, #ffffff 0%, var(--fundo-2) 100%);
  padding-block: 3rem var(--seccao-y);
  overflow: hidden;
}

.heroi__grelha {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 960px) {
  .heroi__grelha {
    grid-template-columns: 1.05fr 1fr;
    gap: 3.5rem;
  }
}

.heroi h1 {
  margin-bottom: 1rem;
}

.heroi__chamada {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--texto-suave);
  margin-bottom: 1.75rem;
  max-width: 34rem;
}

/* O laranja da marca sobre fundo claro tem 2,9:1, insuficiente para texto.
   Onde o titulo precisa de destaque a cor, usa-se o navy com sublinhado
   laranja, que destaca sem falhar contraste. Ver DESIGN.md, contraste. */
.destaque {
  color: var(--navy);
  box-shadow: inset 0 -0.28em 0 var(--laranja-tenue),
    inset 0 -0.32em 0 -0.28em var(--laranja);
}

.heroi__imagem {
  border-radius: var(--raio);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  background: var(--superficie);
}

.heroi__provas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--borda);
}

.prova {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.prova strong {
  color: var(--navy);
  font-weight: 700;
}

/* Selo de conformidade. Existe como bloco próprio, com legenda obrigatória ao
   lado: um logótipo de entidade fiscal sem contexto promete mais do que o
   produto faz hoje, e é a diferença entre um selo e uma afirmação falsa. */
.selo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  max-width: 30rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.selo:hover {
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-1);
}

.selo img {
  height: 1.75rem;
  width: auto;
  flex-shrink: 0;
}

.selo > span {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.selo strong {
  font-size: 0.875rem;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   7. Cartoes
   -------------------------------------------------------------------------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.75rem;
  transition: border-color var(--transicao), box-shadow var(--transicao),
    transform var(--transicao);
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

/* Ícone do cartão, a 64 px. O ficheiro tem 128 para os ecrãs de alta
   densidade. Sessenta e quatro e não vinte e dois como os ícones de linha do
   resto do site: estes são desenhos cheios e com detalhe, e medidos a 28 px
   metade deles vira mancha. São nove numa página inteira, longe uns dos
   outros, que é o que os impede de cansar. */
.cartao__img {
  width: 64px;
  height: 64px;
  display: block;
  margin-bottom: 0.75rem;
}

.cartao h3 {
  margin-bottom: 0.5rem;
}

.cartao p {
  color: var(--texto-suave);
  font-size: 0.9375rem;
  margin: 0;
}
/* `.mt-2` sozinha perde na cascata para a linha acima e não faz nada. Um
   parágrafo a fechar uma lista dentro do cartão precisa mesmo da folga. */
.cartao p.mt-2 {
  margin-top: 1.25rem;
}

.cartao__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.125rem;
  border-radius: var(--raio);
  background: var(--laranja-tenue);
  color: var(--laranja-escuro);
  flex-shrink: 0;
}

.cartao__icone svg {
  width: 1.375rem;
  height: 1.375rem;
}

.cartao__media {
  margin: -1.75rem -1.75rem 1.5rem;
  border-radius: var(--raio) var(--raio) 0 0;
  overflow: hidden;
  background: var(--fundo-2);
}

.cartao__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. Blocos alternados (imagem + texto)
   -------------------------------------------------------------------------- */
.bloco {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: 2.5rem;
}

@media (min-width: 860px) {
  .bloco {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding-block: 3.5rem;
  }
  /* Alterna o lado da imagem sem precisar de classe por bloco. */
  .bloco:nth-child(even) .bloco__media {
    order: -1;
  }
}

.bloco + .bloco {
  border-top: 1px solid var(--borda);
}

.bloco__media img {
  width: 100%;
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
}

.bloco__lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bloco__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.visto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  border-radius: var(--raio-pill);
  background: var(--laranja-tenue);
  color: var(--laranja-escuro);
}

.visto svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* --------------------------------------------------------------------------
   9. Badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--raio-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--laranja-tenue);
  color: var(--laranja-escuro);
}

.badge--sucesso {
  background: var(--sucesso-fundo);
  color: #14532d;
}

.badge--navy {
  background: rgba(33, 46, 65, 0.08);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   10. Precos (alimentado pela API, ver precos.js)
   -------------------------------------------------------------------------- */
.periodo {
  display: inline-flex;
  padding: 4px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  background: var(--fundo-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}

.periodo__wrap {
  display: flex;
  justify-content: center;
}

.periodo button {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 44px;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.periodo button[aria-pressed='true'] {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}

.pacotes {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 700px) {
  .pacotes[data-n='2'],
  .pacotes[data-n='4'] {
    grid-template-columns: repeat(2, 1fr);
  }
  .pacotes[data-n='3'] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .pacotes[data-n='4'] {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pacotes[data-n='1'] {
  max-width: 30rem;
  margin-inline: auto;
}

.pacote {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao),
    transform var(--transicao);
}

.pacote:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}

.pacote--destaque {
  border-color: var(--laranja);
  box-shadow: var(--sombra-2);
}

.pacote--destaque::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--laranja), rgba(248, 114, 3, 0.35));
}

.pacote__topo {
  padding: 1.75rem 1.5rem 1.5rem;
}

.pacote__nome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.pacote__nome h3 {
  margin: 0;
  font-size: 1.25rem;
}

.pacote__desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.pacote__preco {
  margin-top: 1.25rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1.1;
}

.pacote__preco small {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-suave);
  letter-spacing: 0;
}

.pacote__nota {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--texto-suave);
  min-height: 1.25rem;
}

.pacote__teste {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(248, 114, 3, 0.25);
  border-radius: var(--raio);
  background: var(--laranja-tenue);
  font-size: 0.875rem;
}

.pacote__inclui {
  flex: 1;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--borda);
}

.pacote__inclui > p {
  margin: 0 0 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.pacote__inclui li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  margin-bottom: 0.625rem;
}

.pacote__inclui li:last-child {
  margin-bottom: 0;
}

.pacote__inclui li[data-incluido='false'] {
  color: var(--texto-suave);
}

.pacote__accao {
  padding: 0 1.5rem 1.5rem;
}

/* Estados de carregamento e de falha da grelha de pacotes. */
.pacotes__estado {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--texto-suave);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}

.esqueleto {
  border-radius: var(--raio);
  background: linear-gradient(
    90deg,
    var(--fundo-2) 25%,
    #e8eaef 37%,
    var(--fundo-2) 63%
  );
  background-size: 400% 100%;
  animation: brilho 1.4s ease infinite;
  min-height: 26rem;
}

@keyframes brilho {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* --------------------------------------------------------------------------
   11. Escolha de contacto (as tres vias)
   -------------------------------------------------------------------------- */
.vias {
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .vias {
    grid-template-columns: repeat(3, 1fr);
  }
}

.via {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao),
    transform var(--transicao);
  height: 100%;
}

.via:hover {
  border-color: var(--laranja);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.via__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio);
  background: var(--laranja-tenue);
  color: var(--laranja-escuro);
}

.via__icone svg {
  width: 1.5rem;
  height: 1.5rem;
}

.via h3 {
  margin: 0;
  font-size: 1.0625rem;
}

.via p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--texto-suave);
  flex: 1;
}

.via__seta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--laranja-escuro);
}

/* --------------------------------------------------------------------------
   12. Formulario
   -------------------------------------------------------------------------- */
.campo {
  display: block;
  margin-bottom: 1.125rem;
}

.campo > span {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  /* 3:1 é o mínimo para a borda que identifica o campo (WCAG 1.4.11): a
     --borda-forte fica-se por 1,57:1 e o campo desaparece no branco. */
  border: 1px solid #808d9c;
  border-radius: var(--raio);
  background: var(--superficie);
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo textarea {
  min-height: 7rem;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  /* O foco nunca pode descer abaixo do que a borda já tem em repouso (3,38:1).
     O laranja dava 2,84:1, ou seja o campo via-se pior focado do que parado, e
     o halo a 8 por cento de alfa não desenhava nada. O navy dá 13,76:1 e o
     laranja fica como reforço de cor, não como a única marca. */
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(248, 114, 3, 0.35);
}

.campo small {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq {
  max-width: 46rem;
  margin-inline: auto;
}

.faq details {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  margin-bottom: 0.75rem;
  transition: border-color var(--transicao);
}

.faq details[open] {
  border-color: var(--borda-forte);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicao);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__corpo {
  padding: 0 1.25rem 1.25rem;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

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

/* --------------------------------------------------------------------------
   14. Numeros
   -------------------------------------------------------------------------- */
.numeros {
  display: grid;
  gap: 1.5rem 1rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

@media (min-width: 800px) {
  .numeros {
    grid-template-columns: repeat(4, 1fr);
  }
}

.numero strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--laranja);
  line-height: 1.1;
}

.numero span {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #a6b0c2;
}

/* --------------------------------------------------------------------------
   15. Blogue
   -------------------------------------------------------------------------- */
.artigo {
  max-width: 44rem;
  margin-inline: auto;
}

.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--texto-suave);
  margin-bottom: 1.5rem;
}

.artigo__corpo {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.artigo__corpo h2 {
  font-size: 1.625rem;
  margin-top: 2.5rem;
}

.artigo__corpo h3 {
  margin-top: 2rem;
}

.artigo__corpo ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.artigo__corpo li {
  margin-bottom: 0.5rem;
}

.artigo__corpo strong {
  color: var(--navy);
}

.artigo__corpo blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--laranja);
  background: var(--fundo-2);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: var(--texto-suave);
}

.artigo__corpo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.artigo__corpo th,
.artigo__corpo td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--borda);
  text-align: left;
}

.artigo__corpo th {
  font-weight: 700;
  color: var(--navy);
  background: var(--fundo-2);
}

/* Tabelas largas rolam dentro do proprio contentor, nunca alargam a pagina. */
.rola-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   16. Rodape
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--navy-escuro);
  color: #a6b0c2;
  padding-block: 3.5rem 2rem;
  font-size: 0.9375rem;
}

.rodape__grelha {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 700px) {
  .rodape__grelha {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.rodape h4 {
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.rodape a {
  color: #a6b0c2;
  transition: color var(--transicao);
}

.rodape a:hover {
  color: #ffffff;
}

.rodape li {
  margin-bottom: 0;
}

/* 44 px de alvo sem abrir a lista: os 10 px que eram margem passam a ser
   área tocável do próprio link. */
/* A `.rodape__fim a` entra aqui porque o 404 não tem lista no rodapé: a sua
   única ligação vive solta no fecho, e sem isto ficava a 17 px de altura, que é
   a página onde uma pessoa perdida mais precisa de acertar no contacto. */
.rodape li a,
.rodape__fim a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.rodape__marca img {
  height: 2.5rem;
  width: auto;
  margin-bottom: 1rem;
  /* O logotipo e escuro: sobre o navy do rodape inverte-se para branco. */
  filter: brightness(0) invert(1);
}

.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(166, 176, 194, 0.2);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   17. Utilitarios
   -------------------------------------------------------------------------- */
.centro {
  text-align: center;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Espaçamentos e ajustes pontuais.
   Existem como classes, e não como `style=""` no HTML, porque a política de
   segurança do site declara `style-src 'self'`: um atributo de estilo em linha
   é bloqueado pelo browser e a regra simplesmente não se aplica, sem erro
   visível na página. Ou se abria o CSP com `unsafe-inline`, ou se traziam os
   meia dúzia de ajustes para aqui. Trouxeram-se para aqui. */
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 1.25rem;
}
.mt-3 {
  margin-top: 2rem;
}
.mt-4 {
  margin-top: 2.5rem;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.625rem;
}
.mb-2 {
  margin-bottom: 1.25rem;
}
.mb-3 {
  margin-bottom: 2rem;
}

.texto-pequeno {
  font-size: 0.875rem;
}

.texto-forte {
  color: var(--texto);
}

.texto-accao {
  color: var(--laranja-escuro);
}

/* "Voltar ao blogue" é a única forma de sair de um artigo sem usar o menu, e
   estava com 23 px de altura. A regra da casa são 44 px. */
.artigo__meta .texto-accao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Largura de leitura confortável para um parágrafo isolado e centrado. */
.medida {
  max-width: 34rem;
  margin-inline: auto;
}

.sem-linha {
  border-top: 0;
  padding-top: 0;
}