/* ---------------------------------------------------------------------------
   Landing Bruno Ferreira — MEO · NOS · Vodafone
   Sistema visual. Escrito para telemóvel primeiro e para olhos de 50 anos.

   Duas decisões que explicam o resto:

   1. O corpo de texto é 18px, não 16px. O benchmark mediu 17 sites do setor e
      nenhum chega aos 16px. Quem lê esta página tem a fatura na mão e não tem
      paciência para apertar os olhos.
   2. A paleta não é o azul da MEO, nem o vermelho da Vodafone, nem o roxo da
      NOS. E agora é obrigatório que não seja: a página trabalha com as três em
      pé de igualdade, e vestir a cor de uma delas seria escolher por quem lê.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Tipografia. Três vozes, cada uma com um trabalho:
     - Newsreader (serifada) nos títulos: dá autoridade de coisa escrita e
       publicada, que é exatamente o que a página quer parecer.
     - IBM Plex Sans no corpo: aberta e legível em corpo grande.
     - IBM Plex Mono nos números: os algarismos alinham em coluna, e é o que
       faz a tabela das reclamações ler-se como dados em vez de argumento. */
  --tipo-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --tipo-corpo:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Arial, sans-serif;
  --tipo-numero: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Tinta */
  --tinta:        #16191d;
  --tinta-suave:  #4b535c;
  /* #656e79, não o #6b7480 original: esse passava só sobre branco (4,74:1) e
     falhava o mínimo de 4,5:1 nas duas faixas com cor (4,35 e 4,20) — exatamente
     onde vivem a .ajuda e o .miudo, o texto de apoio mais pequeno da página.
     Medido (revisao-acessibilidade-e-painel-2026-09-01.md, A8): 5,17:1 sobre
     branco, 4,75:1 sobre --papel-quente, 4,59:1 sobre --papel-frio — passa nas
     três. */
  --tinta-tenue:  #656e79;

  /* Fundos */
  --papel:        #ffffff;
  --papel-quente: #f7f5f1;
  --papel-frio:   #eef2f4;

  /* Ação — petróleo escuro, contraste 8.9:1 sobre branco */
  --acao:         #0d4b52;
  --acao-escura:  #093840;
  --acao-clara:   #e3eff0;

  /* Sinais */
  --alerta:       #8a4b00;
  --erro:         #a01f1f;
  --ok:           #1c6b3f;

  /* Traços */
  --linha:        #d8dde2;
  --linha-forte:  #b3bcc4;
  /* --linha-forte é só decorativo (divisórias, molduras de caixa informativa) —
     fica como está. Para molduras de CONTROLO (caixa de escrita, botão, filtro)
     o mínimo WCAG é 3:1 e o --linha-forte só dá 1,93:1 sobre branco e 1,77:1
     sobre --papel-quente. Medido (A4): #7d868f dá 3,70:1 sobre branco, 3,40:1
     sobre --papel-quente e 3,28:1 sobre --papel-frio — passa nos três fundos
     que esta página e o painel usam. */
  --borda-campo:  #7d868f;

  /* Medidas */
  --largura:       36rem;   /* uma coluna, uma leitura */
  --largura-larga: 60rem;
  --raio:          10px;
  --raio-pequeno:  6px;
  --sombra:        0 1px 2px rgba(22, 25, 29, .06), 0 4px 14px rgba(22, 25, 29, .06);

  /* Ritmo vertical */
  --e1: .5rem;  --e2: .875rem; --e3: 1.25rem;
  --e4: 2rem;   --e5: 3rem;    --e6: 4.5rem;
}

/* --- Base ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 18px/1.6 var(--tipo-corpo);
  -webkit-font-smoothing: antialiased;
}

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

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

/* --- Tipografia ---------------------------------------------------------- */

h1, h2 {
  font-family: var(--tipo-titulo);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0 0 var(--e3);
}

h1 { font-size: clamp(2.1rem, 6.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }

h3 {
  font-family: var(--tipo-corpo);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--e1);
}

/* Etiqueta de secção: maiúsculas pequenas, espaçadas, em monoespaçado. Serve
   para nomear um bloco sem competir com o título — e para dar às tabelas e aos
   cartões um ar de coisa catalogada, não de cartaz. */
.etiqueta {
  font-family: var(--tipo-numero);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin: 0 0 var(--e2);
}

.etiqueta--centrada { text-align: center; }

p { margin: 0 0 var(--e3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.destaque { font-size: 1.15rem; color: var(--tinta-suave); }

.miudo { font-size: .9375rem; line-height: 1.55; color: var(--tinta-tenue); }

a { color: var(--acao); text-underline-offset: 3px; }
a:hover { color: var(--acao-escura); }

strong { font-weight: 650; }

/* --- Estrutura ----------------------------------------------------------- */

.faixa { padding: var(--e5) var(--e3); }
.faixa--quente { background: var(--papel-quente); }
.faixa--fria   { background: var(--papel-frio); }
.faixa--escura { background: var(--acao); color: #fff; }
.faixa--escura h2 { color: #fff; }
.faixa--escura a  { color: #cfe6e8; }

/* Todas as secções partilham o mesmo contentor largo, e é o CONTEÚDO que fica
   limitado à medida de leitura. Assim tudo alinha no mesmo eixo esquerdo de
   cima a baixo da página. Antes havia dois contentores de larguras diferentes,
   e o texto saltava de posição de secção para secção — o que faz uma página
   parecer montada aos bocados mesmo quando cada bocado está bem. */
.coluna {
  max-width: var(--largura-larga);
  margin-inline: auto;
}

.coluna > * { max-width: var(--largura); }

/* As grelhas (cartões, factos, marcas, topo) usam a largura toda. */
.coluna > :where(.cartoes, .factos, .marcas, .topo__grelha) { max-width: none; }
.coluna--larga > * { max-width: none; }

@media (min-width: 48rem) {
  .faixa { padding: var(--e6) var(--e4); }
}

/* --- Topo ---------------------------------------------------------------- */

.topo {
  padding: var(--e4) var(--e3) var(--e5);
  background: linear-gradient(180deg, var(--papel-quente), var(--papel));
  border-bottom: 1px solid var(--linha);
}

.topo .destaque { margin-bottom: var(--e4); }

/* No telemóvel empilha; no computador o texto fica à esquerda com medida de
   leitura certa e o cartão de resposta à direita — que é o que evita meia
   página em branco sem encher com decoração. */
.topo__grelha { display: grid; gap: var(--e4); }

@media (min-width: 56rem) {
  .topo__grelha {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--e6);
    align-items: start;
  }
}

.cartao-resposta {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e3);
  box-shadow: var(--sombra);
}

/* O botão do cartão fica colado ao fundo da lista, com respiro. Altura menor
   do que o botão principal (48 em vez de 56) — continua a ser alvo de dedo,
   mas não disputa a atenção com o da esquerda. */
.cartao-resposta__accao {
  margin-top: var(--e3);
  min-height: 48px;
  font-size: 1rem;
}

.lista-numerada {
  list-style: none;
  counter-reset: passo;
  margin: 0;
  padding: 0;
}

.lista-numerada > li {
  counter-increment: passo;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: var(--e2);
  font-size: 1rem;
  line-height: 1.45;
}

.lista-numerada > li:last-child { margin-bottom: 0; }

.lista-numerada > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acao-clara);
  color: var(--acao-escura);
  font-family: var(--tipo-numero);
  font-size: .8125rem;
  font-weight: 500;
}

/* --- A faixa das três marcas --------------------------------------------- */

.faixa--marcas {
  padding: var(--e4) var(--e3);
  background: var(--papel);
  border-block: 1px solid var(--linha);
}

.marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0, 1fr) e não 1fr: com 1fr a coluna nunca encolhe abaixo do
     conteúdo, e "Vodafone" — palavra mais longa do que "MEO" e "NOS" —
     alargava a terceira caixa (82/82/100px no telemóvel). Numa faixa cuja
     regra é pé de igualdade, uma caixa maior é uma marca em destaque. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--e3);
}

.marca {
  display: grid;
  place-items: center;
  gap: var(--e1);
  min-height: 56px;
  padding: var(--e2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
}

/* O nome escrito por baixo do logótipo. Existe por causa da MEO, que desde
   2024 é só um símbolo — mas dá-se às três, porque tratar uma de maneira
   diferente das outras é exatamente o que esta faixa não pode fazer. */
.marca__nome {
  font-family: var(--tipo-numero);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--tinta-tenue);
}

/* Os três logótipos oficiais (SVG, ficheiros em /marcas/). O que exige
   cuidado não é a altura — é o peso visual: a mesma altura para os três
   NÃO pesa o mesmo. A MEO é hoje só um símbolo redondo (sem a palavra
   escrita) — precisa de vir maior para não ler mais fraca do que as outras
   duas, que são palavras inteiras. A Vodafone é o oposto: uma faixa muito
   mais larga do que as outras e, com a mesma altura, domina a fila. Por
   isso cada marca tem a sua própria altura, afinada de olho até os três
   pesarem o mesmo — não há régua comum que sirva às três. */
.marca img {
  display: block;
  width: auto;
}

.marca--meo img { height: 40px; }
.marca--nos img { height: 28px; }
.marca--vodafone img { height: 22px; }

/* --- Cartões (o que ele trata) -------------------------------------------- */

.cartoes {
  list-style: none;
  margin: var(--e4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
}

@media (min-width: 48rem) {
  .cartoes { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e3);
}

.cartao p { font-size: 1rem; line-height: 1.5; color: var(--tinta-suave); margin: 0; }

.simbolo {
  width: 32px;
  height: 32px;
  margin-bottom: var(--e2);
  fill: none;
  stroke: var(--acao);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Cartão do número direto ---------------------------------------------- */

.cartao-numero {
  margin-top: var(--e4);
  padding: var(--e3);
  background: var(--papel-quente);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.numero-grande {
  font-family: var(--tipo-numero);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 500;
  letter-spacing: .04em;
  margin: 0 0 var(--e1);
  line-height: 1.1;
}

.numero-grande a { text-decoration: none; color: var(--tinta); }
.numero-grande a:hover { color: var(--acao); }

/* --- Factos com número grande (os direitos) ------------------------------- */

.factos { display: grid; gap: var(--e3); margin-bottom: var(--e3); }

@media (min-width: 40rem) {
  .factos { grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
}

.facto {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding: var(--e3);
  background: var(--papel-quente);
  border-radius: var(--raio);
}

.facto__numero {
  font-family: var(--tipo-numero);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--acao);
  margin: 0;
  flex: 0 0 auto;
}

.facto__texto { margin: 0; font-size: 1rem; line-height: 1.45; }

/* --- Botões -------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  min-height: 56px;          /* dedo, não rato */
  width: 100%;
  padding: var(--e2) var(--e4);
  border: 0;
  border-radius: var(--raio);
  background: var(--acao);
  color: #fff;
  font: inherit;
  font-weight: 650;
  font-size: 1.0625rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}

.botao:hover  { background: var(--acao-escura); color: #fff; }
.botao:active { transform: translateY(1px); }
/* Não pode ser --linha-forte: dava texto branco a 1,93:1 sobre o fundo, e
   "A enviar…" ficava ilegível bem no momento em que mais importa confirmar
   que a submissão está a decorrer (A4). --tinta-tenue já passa 4,5:1 nos três
   fundos (A8), o que aqui sobra: só precisava de 3:1. */
.botao[disabled] { background: var(--tinta-tenue); cursor: progress; }

.botao--vazio {
  background: transparent;
  color: var(--acao);
  border: 2px solid var(--acao);
}
.botao--vazio:hover { background: var(--acao-clara); color: var(--acao-escura); }

@media (min-width: 30rem) {
  .botao { width: auto; }
  .botao--largo { width: 100%; }
}

/* --- Foco: visível sempre, em qualquer fundo ----------------------------- */

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

.faixa--escura :where(a, button, input, select):focus-visible { outline-color: #fff; }

/* --- Cartão da pessoa ---------------------------------------------------- */

.pessoa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  text-align: center;
}

.pessoa img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--papel);
  box-shadow: var(--sombra);
}

.selo {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--acao-clara);
  color: var(--acao-escura);
  font-size: .875rem;
  font-weight: 650;
  letter-spacing: .01em;
}

@media (min-width: 40rem) {
  .pessoa { flex-direction: row; text-align: left; gap: var(--e4); }
}

/* --- Formulário ---------------------------------------------------------- */

.formulario {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e4) var(--e3);
}

@media (min-width: 30rem) { .formulario { padding: var(--e4); } }

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

.campo > label {
  display: block;
  margin-bottom: 6px;
  font-weight: 650;
  font-size: 1.0625rem;
}

.campo .ajuda {
  display: block;
  margin-bottom: var(--e1);
  font-size: .9375rem;
  color: var(--tinta-tenue);
  font-weight: 400;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 54px;
  padding: var(--e2) var(--e3);
  /* --borda-campo, não --linha-forte: é a moldura de um controlo, mínimo
     WCAG 3:1, e --linha-forte só dá 1,93:1 (A4). */
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio-pequeno);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 1.0625rem;   /* acima de 16px evita o zoom automático do iOS */
}

/* A seta é desenhada por nós porque a nativa muda de sistema para sistema e em
   alguns quase não se vê. Sem seta, um select passa por caixa de texto e a pessoa
   não percebe que tem de o abrir. */
.campo select {
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230d4b52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 20px 20px;
}

.campo select:invalid,
.campo select option[value=""] { color: var(--tinta-tenue); }
.campo input:hover, .campo select:hover { border-color: var(--tinta-tenue); }

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: var(--erro); }

/* Global, não aninhado em .campo: o erro do consentimento vive fora de um .campo
   e ficava a preto, com corpo de parágrafo, longe da caixa a que se refere. */
.erro {
  display: block;
  margin-top: 6px;
  color: var(--erro);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.erro[hidden] { display: none !important; }

/* O do consentimento encosta à caixa, que tem margem própria por cima. */
.consentimento + .erro { margin: -.5rem 0 var(--e3); }

/* Consentimento: caixa de marcar grande, texto curto e legível, nunca pré-marcada.
   Sem moldura nem fundo próprio de propósito — a versão emoldurada dava-lhe ar de
   contrato e fazia as pessoas recuar mesmo quando o texto já estava curto. A caixa
   continua a ser obrigatória; o que se tirou foi o aspeto de letra pequena. */
.consentimento {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin: var(--e4) 0 var(--e3);
}

.consentimento input[type="checkbox"] {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--acao);
}

.consentimento label {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* Armadilha para robôs: fora do ecrã, mas não display:none — há robôs que
   reparam nisso e passam a ignorar o campo. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Estado do envio */
.recado {
  margin-top: var(--e3);
  padding: var(--e3);
  border-radius: var(--raio-pequeno);
  font-size: 1rem;
}

.recado--erro { background: #fdf0f0; border: 1px solid #e8bcbc; color: var(--erro); }
.recado--ok   { background: #eef7f1; border: 1px solid #b7ddc6; color: var(--ok); }
.recado[hidden] { display: none !important; }

/* --- Listas de argumentos ------------------------------------------------ */

.lista-limpa { list-style: none; margin: 0; padding: 0; }

.lista-limpa > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--e3);
}

.lista-limpa > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--acao);
}

.faixa--escura .lista-limpa > li::before { background: #7fc4c9; }

/* --- Tabela das notas da ANACOM ------------------------------------------ */

/* A tabela tem de se ler como um facto publicado, não como um argumento de
   venda: sem barras, sem realces, sem cor a distinguir uma operadora das
   outras. A linha da Vodafone tem exatamente o mesmo tratamento que a da MEO —
   encolhê-la deitava fora a secção inteira. */
.tabela-envolvente {
  overflow-x: auto;
  margin: var(--e4) 0 var(--e3);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: var(--e3);
}

table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }

caption { text-align: left; }

th, td {
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linha);
}

tr:last-child th, tr:last-child td { border-bottom: 0; }

th { text-align: left; font-weight: 600; }

td {
  text-align: right;
  font-family: var(--tipo-numero);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* --- Perguntas frequentes ------------------------------------------------ */

details { border-bottom: 1px solid var(--linha); padding: var(--e3) 0; }

summary {
  font-weight: 650;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  padding-right: 2rem;
  position: relative;
}

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

summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--acao);
  line-height: 1;
}

details[open] summary::after { content: "–"; }
details > *:not(summary) { margin-top: var(--e2); color: var(--tinta-suave); }

/* --- Rodapé -------------------------------------------------------------- */

.rodape {
  padding: var(--e5) var(--e3);
  background: var(--tinta);
  color: #b9c0c8;
  font-size: .9375rem;
  line-height: 1.6;
}

.rodape a { color: #d7dde3; }
.rodape p { margin-bottom: var(--e2); }

/* --- Acessibilidade ------------------------------------------------------ */

.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;
}

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--acao);
  color: #fff;
  padding: var(--e2) var(--e3);
  z-index: 10;
}

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