/* =============================================================
   AfroChip — folha de estilo única do site público
   =============================================================

   Esta folha é uma segunda passagem. A primeira foi rejeitada com
   uma frase que vale mais do que qualquer parecer: "muito quadrada,
   nada moderna, parece que foi um principiante que desenhou".

   O diagnóstico foi medido, não sentido, e é isto que aqui está
   corrigido:

     tipos de letra externos ....  0  ->  três, com pilha de reserva
     border-radius .............  0  ->  escala de seis degraus
     border: 2px solid .........  9  ->  nenhum; todos os fios a 1px
     sombras ...................  2, ambas para dentro
                                     ->  camadas suaves sobrepostas
     transition ................  0  ->  em tudo o que se toca
     revelação ao rolar ........  0  ->  IntersectionObserver
     gradientes e desfoques ....  0  ->  luz, vidro e profundidade
     clamp() tipográfico .......  37 ->  mantido, era o que estava bem

   -------------------------------------------------------------
   1. TIPOGRAFIA — um trio, cada um com um trabalho
   -------------------------------------------------------------
   FRAUNCES, serifada de display, variável.
     Contraste alto entre hastes grossas e finas — é isso que dá o
     ar de revista aos títulos grandes. Tem eixo óptico (opsz
     9..144), por isso o mesmo desenho afina-se sozinho entre um
     título de 4rem e um subtítulo de 1,2rem: a serifa não fica
     gorda em pequeno nem frágil em grande.

   INTER, sem serifa, variável.
     Corpo, navegação, botões, rótulos. Altura-x alta e formas
     abertas: continua a ler-se num telemóvel ao sol, que é onde
     metade destas compras vai ser feita. Sem personalidade a mais,
     que é a virtude que se lhe pede ao lado da Fraunces.

   IBM PLEX MONO, monoespaçada.
     TODOS OS NÚMEROS: preços em kwanzas, GB, dias, referências
     Multicaixa, NIF, contagens, numeração de passos. É a
     assinatura da casa e faz trabalho real — em largura fixa uma
     coluna de preços alinha sozinha, e 13.500 nunca fica mais
     estreito do que 27.000.

   As três vêm do Google Fonts, declaradas no <head> do molde. É o
   único pedido a um servidor de fora em todo o site, e há um teste
   que falha se aparecer outro. Cada família tem pilha de reserva do
   sistema: se a rede falhar, a página lê-se na mesma.

   -------------------------------------------------------------
   2. COR E CONTRASTE — a regra que não se quebra
   -------------------------------------------------------------
   O amarelo da marca sobre branco dá 1,4:1. Daqui saem duas regras
   e nenhuma delas é gosto:

     a) Sobre superfície clara o amarelo é SUPERFÍCIE — fundo de
        bloco, de botão, de marcador. Por cima escreve-se sempre a
        tinta escura.
     b) Só sobre a superfície escura é que o amarelo pode ser
        TINTA. Aí dá 13,7:1, e é onde ele finalmente brilha.

   É por isto que existe uma secção escura por página. Com só claro
   e amarelo, o amarelo era obrigado a ser superfície E ênfase ao
   mesmo tempo, e não conseguia as duas.

   Rácios calculados pela fórmula WCAG (L1+0,05)/(L2+0,05) sobre a
   luminância relativa de cada cor:

     #121212 sobre #FFFFFF .............. 18,7:1   AAA
     #121212 sobre #FAF9F6  (papel) ..... 17,8:1   AAA
     #4A4A46 sobre #FFFFFF  (secundário)  8,9:1    AAA
     #4A4A46 sobre #FAF9F6 .............. 8,5:1    AAA
     #6E6C66 sobre #FFFFFF  (rótulos) ... 5,0:1    AA
     #121212 sobre #FFD400  (tinta/amarelo) 13,1:1 AAA
     #FFD400 sobre #FFFFFF .............. 1,4:1    PROIBIDO
     #FFD400 sobre #0B0B0B  (noite) ..... 13,7:1   AAA
     #FAF9F6 sobre #0B0B0B .............. 18,7:1   AAA
     #B5B1A8 sobre #0B0B0B  (secundário)  9,2:1    AAA
     #B5B1A8 sobre #161616  (painel) .... 8,5:1    AAA
     #B3261E sobre #FFFFFF  (erro) ...... 6,5:1    AA
     #B3261E sobre #FAF9F6 .............. 6,2:1    AA

   O cinzento de texto nunca desce abaixo de #6E6C66 no claro nem
   sobe acima de #B5B1A8 no escuro. Cinzentos mais fracos existem
   só como fio, nunca como letra.

   O erro nunca é assinalado só por cor: leva ícone, texto e
   contorno. O vermelho é a única cor fora da paleta em toda a folha.

   -------------------------------------------------------------
   3. ESCALA DE RAIOS — o raio é informação, não decoração
   -------------------------------------------------------------
   "Menos quadrada" não é arredondar tudo por igual: isso fica
   infantil. Aqui o raio cresce com a ÁREA e com a moleza do
   elemento, e o que é régua não leva raio nenhum.

     --r0    0px    fios, separadores, linhas de tabela, células
                    da ficha técnica. O que mede não arredonda.
     --r1    4px    peças pequenas e precisas: selos, pastilhas de
                    contagem, o anel de foco. Raio grande em peça
                    pequena come a peça.
     --r2    10px   controlos que se tocam: botões, campos, ícones
                    em caixa, separadores.
     --r3    16px   cartões e painéis de conteúdo.
     --r4    28px   blocos grandes e macios: o selector, o painel
                    da noite, a caixa do checkout.
     --r5    40px   as duas superfícies maiores da página: a arte
                    do herói e a moldura do bloco escuro.
     --rmax  999px  só etiquetas de uma linha de texto.

   -------------------------------------------------------------
   4. PROFUNDIDADE — camadas, nunca caixas
   -------------------------------------------------------------
   Não há uma única sombra dura deslocada nesta folha. A elevação
   faz-se por várias sombras suaves sobrepostas, com opacidades
   baixas (4% a 10%) e raios crescentes, que é como a luz se
   comporta. Onde há contorno é sempre de 1px — os nove contornos
   de 2px da primeira passagem saíram todos.

   Os elementos vivos levam ainda um brilho amarelo difuso por
   trás: sombra de raio grande em rgba(255,212,0,...). Não se lê
   como sombra, lê-se como calor.

   -------------------------------------------------------------
   5. MOVIMENTO — curvas pensadas, nunca `linear`
   -------------------------------------------------------------
     --saida  cubic-bezier(.22,1,.36,1)    arranca depressa e
                                           assenta devagar. Entradas.
     --suave  cubic-bezier(.4,0,.2,1)      ida e volta de estados.
     --mola   cubic-bezier(.34,1.4,.64,1)  pequeno excesso, só em
                                           peças pequenas que
                                           respondem ao toque.

   Tudo desligado dentro de @media (prefers-reduced-motion: reduce),
   no fim da folha, e nada fica escondido quando o movimento pára.
   ============================================================= */

:root {
  /* --- superfícies claras --- */
  --branco: #FFFFFF;
  --papel: #FAF9F6;
  --papel-2: #F2F0EA;

  /* --- tinta --- */
  --tinta: #121212;
  --tinta-2: #4A4A46;
  --tinta-3: #6E6C66;
  --tinta-inv: #FAF9F6;

  /* --- amarelo: superfície, nunca tinta sobre claro --- */
  --amarelo: #FFD400;
  --amarelo-claro: #FFE04D;
  --amarelo-luz: rgba(255, 212, 0, .16);
  --amarelo-vidro: rgba(255, 212, 0, .10);

  /* --- fios --- */
  --linha: #E4E2DA;
  --linha-forte: #CFCCC2;

  /* --- reforço de erro. A única cor fora da paleta. --- */
  --alerta: #B3261E;
  --alerta-fundo: #FDECEA;

  /* --- a noite: a única superfície onde o amarelo é tinta --- */
  --noite: #0B0B0B;
  --noite-2: #161616;
  --noite-linha: rgba(250, 249, 246, .14);
  --noite-texto: #B5B1A8;

  /* --- tipos, cada um com pilha de reserva do sistema --- */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  /* --- escala de raios: ver a nota 3 no topo --- */
  --r0: 0px;
  --r1: 4px;
  --r2: 10px;
  --r3: 16px;
  --r4: 28px;
  --r5: 40px;
  --rmax: 999px;

  /* --- profundidade por camadas --- */
  --sombra-1:
    0 1px 1px rgba(18, 18, 18, .04),
    0 2px 6px rgba(18, 18, 18, .04);
  --sombra-2:
    0 1px 2px rgba(18, 18, 18, .05),
    0 4px 12px rgba(18, 18, 18, .05),
    0 12px 26px rgba(18, 18, 18, .05);
  --sombra-3:
    0 2px 4px rgba(18, 18, 18, .05),
    0 8px 20px rgba(18, 18, 18, .06),
    0 24px 54px rgba(18, 18, 18, .08);
  --sombra-4:
    0 4px 8px rgba(18, 18, 18, .06),
    0 16px 36px rgba(18, 18, 18, .08),
    0 40px 80px rgba(18, 18, 18, .10);
  --brilho:
    0 6px 18px rgba(255, 212, 0, .30),
    0 18px 44px rgba(255, 212, 0, .22);
  --brilho-largo:
    0 10px 30px rgba(255, 212, 0, .26),
    0 30px 80px rgba(255, 212, 0, .18);
  --sombra-noite:
    0 2px 6px rgba(0, 0, 0, .5),
    0 18px 44px rgba(0, 0, 0, .45);

  /* --- curvas --- */
  --saida: cubic-bezier(.22, 1, .36, 1);
  --suave: cubic-bezier(.4, 0, .2, 1);
  --mola: cubic-bezier(.34, 1.4, .64, 1);

  /* A LARGURA DA PAGINA.

     Eram 1180px fixos. Num ecra de 1900 isso deixa 360px de branco de
     cada lado, e o dono deu por isso: "parece que esta so no meio".

     Agora acompanha o ecra ate 1720. Nao vai a ponta absoluta de
     proposito: uma grelha de precos encostada ao vidro nao se le, e o
     texto tem medida propria (56 a 68 caracteres) em oito sitios desta
     folha — e essa medida e que manda na leitura, nao o contentor.
     O que enche o ecra sao as GRELHAS: cartoes de pacote, lista de
     paises, as duas colunas do destino. */
  --larg: min(1720px, 94vw);
  --larg-estreita: 880px;
  --goteira: clamp(20px, 5vw, 56px);
}

/* =============================================================
   BASE
   ============================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;

  /* Tem de estar AQUI e não só no <body>.
     Com `overflow-x: hidden` apenas no body, o browser promove o body a
     contentor de deslocamento e a janela deixa de rolar: `window.scrollTo`
     não faz nada, `scrollIntoView` não chega ao sítio, o `scroll-margin-top`
     é ignorado e as âncoras deixam de funcionar. Levou a que escolher a
     duração não deslizasse até aos pacotes. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); letter-spacing: -.032em; line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.05rem; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Os NÚMEROS são monoespaçados. É a assinatura da casa, e alinha
   colunas de preços sem uma tabela. */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

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

/* -------- foco: legível nas DUAS superfícies -------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: var(--r1);
  box-shadow: 0 0 0 6px rgba(255, 212, 0, .32);
}

.bloco-escuro :where(a, button, input, select, [tabindex]):focus-visible,
.rodape :where(a, button, input, select, [tabindex]):focus-visible {
  outline-color: var(--amarelo);
  box-shadow: 0 0 0 6px rgba(255, 212, 0, .22);
}

.salta-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 80;
  background: var(--tinta); color: var(--tinta-inv);
  padding: 12px 18px; text-decoration: none; font-weight: 600;
  border-radius: var(--r2);
  box-shadow: var(--sombra-3);
}
.salta-conteudo:focus { left: 14px; top: 14px; }

.envelope {
  max-width: var(--larg);
  margin-inline: auto;
  padding-inline: var(--goteira);
}
.envelope--estreito { max-width: var(--larg-estreita); }

/* -------- revelação ao rolar -------- */
html.com-js .revelar {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .78s var(--saida) var(--atraso, 0ms),
    transform .78s var(--saida) var(--atraso, 0ms);
}
html.com-js .revelar.esta-visivel { opacity: 1; transform: none; }
html:not(.com-js) .revelar { opacity: 1; transform: none; }

[data-grupo] > *:nth-child(2) { --atraso: 90ms; }
[data-grupo] > *:nth-child(3) { --atraso: 180ms; }
[data-grupo] > *:nth-child(4) { --atraso: 270ms; }

/* =============================================================
   PEÇAS COMUNS
   ============================================================= */

.sobrancelha {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 18px;
}

.ponto {
  width: 7px; height: 7px; border-radius: var(--rmax);
  background: var(--amarelo); flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .28), 0 0 14px rgba(255, 212, 0, .9);
}

.realce {
  background-image: linear-gradient(var(--amarelo), var(--amarelo));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .34em;
  border-radius: var(--r1);
}

.chamada {
  margin-top: 20px;
  font-size: clamp(1.04rem, 1.6vw, 1.24rem);
  line-height: 1.58;
  color: var(--tinta-2);
  max-width: 56ch;
}

/* -------- botões -------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r2);
  padding: 12px 20px;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  transition:
    transform .4s var(--saida),
    box-shadow .4s var(--suave),
    background-color .3s var(--suave),
    color .3s var(--suave),
    border-color .3s var(--suave);
}
.botao svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform .42s var(--saida); }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.botao:hover svg { transform: translateX(3px); }

.botao--principal {
  background: var(--amarelo);
  color: var(--tinta);
  box-shadow: var(--brilho);
}
.botao--principal:hover { box-shadow: var(--brilho-largo); }

.botao--contorno {
  background: var(--branco);
  color: var(--tinta);
  border-color: var(--linha-forte);
  box-shadow: var(--sombra-1);
}
.botao--contorno:hover { box-shadow: var(--sombra-2); border-color: var(--tinta); }

.botao--escuro {
  background: var(--tinta);
  color: var(--tinta-inv);
  box-shadow: var(--sombra-2);
}
.botao--escuro:hover { box-shadow: var(--sombra-3); }

.botao--grande { padding: 15px 26px; font-size: 15.5px; }
.botao--compacto { padding: 9px 16px; font-size: 14px; }
.botao--largo { width: 100%; }

/* =============================================================
   CABEÇALHO
   ============================================================= */

.cabecalho {
  position: sticky; top: 0; z-index: 60;
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition: box-shadow .4s var(--suave), border-color .4s var(--suave), background-color .4s var(--suave);
}

/* Vidro: o cabeçalho deixa ver o que passa por baixo. É a
   profundidade mais barata que há, e é a que faz falta quando o
   documento é todo claro. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho {
    background: rgba(250, 249, 246, .78);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}

.cabecalho.rolado {
  border-bottom-color: var(--linha);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .03), 0 10px 28px rgba(18, 18, 18, .06);
}

.cabecalho__interior {
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; position: relative;
}

.marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex: 0 0 auto;
  border-radius: var(--r2);
}
/* A marca nova é LARGA, e não quadrada.

   O símbolo antigo era um chip de 40x40 e estas medidas eram 32x32. O novo
   — a barra de dados com as barras de sinal — desenha-se em 68x54, e forçá-lo
   a um quadrado esmagava-o na horizontal.

   34 de altura por 43 de largura mantém a proporção exacta (68/54) e deixa a
   marca com o mesmo peso óptico que tinha ao lado do texto. */
.marca__simbolo {
  width: 43px; height: 34px; flex: 0 0 auto;
  transition: transform .5s var(--mola);
}

/* O chip rodava ao passar o rato, e num chip isso lia-se como um objecto a
   ser virado na mão. Estas são barras de sinal: uma barra de sinal inclinada
   parece um erro de alinhamento, não um gesto. Fica só a aproximação. */
.marca:hover .marca__simbolo { transform: scale(1.06); }
.marca__texto {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: 24px; font-weight: 600; letter-spacing: -.03em;
}

.navegacao { display: none; }
/* O espaço entre entradas cede antes dos nomes.
   Com seis entradas — e duas delas longas — 26 px fixos faziam o cabeçalho
   transbordar num portátil de 1100 px. O que aperta é a distância; os nomes
   ficam inteiros, numa linha. */
.navegacao__lista {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.7vw, 26px);
}
.navegacao a {
  position: relative; text-decoration: none; padding: 7px 0;
  font-size: 14.5px; font-weight: 450; color: var(--tinta-2);
  transition: color .3s var(--suave);

  /* Uma entrada de navegação não parte em duas linhas. "Como funciona" e
     "eSIMs internacionais" têm espaço no meio, e sem isto quebravam quando a
     barra apertava — a entrada passava a parecer duas. Se não couberem todas,
     o que tem de ceder é a distância entre elas, não o nome de cada uma. */
  white-space: nowrap;
}
.navegacao a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--tinta); border-radius: var(--rmax);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--saida);
}
.navegacao a:hover { color: var(--tinta); }
.navegacao a:hover::after { transform: scaleX(1); }
.navegacao a[aria-current="page"] { color: var(--tinta); font-weight: 550; }
.navegacao a[aria-current="page"]::after { transform: scaleX(1); background: var(--amarelo); height: 2.5px; }

.cabecalho__accoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.idiomas {
  display: flex; flex: 0 0 auto;
  border: 1px solid var(--linha-forte);
  border-radius: var(--rmax);
  padding: 3px; background: var(--branco);
  box-shadow: var(--sombra-1);
}
.idiomas__botao {
  text-decoration: none;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--tinta-2); border-radius: var(--rmax);
  transition: background-color .35s var(--suave), color .35s var(--suave);
}
.idiomas__botao:hover { color: var(--tinta); }
.idiomas__botao[aria-current="true"] {
  background: var(--tinta); color: var(--tinta-inv);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .18), 0 4px 10px rgba(18, 18, 18, .14);
}

.cabecalho__cta { display: none; }

.menu-botao {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer; background: var(--branco);
  border: 1px solid var(--linha-forte); border-radius: var(--r2);
  width: 42px; height: 42px; align-items: center;
  box-shadow: var(--sombra-1);
  transition: box-shadow .35s var(--suave), transform .35s var(--saida);
}
.menu-botao:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.menu-botao__barra {
  display: block; width: 17px; height: 1.6px; background: var(--tinta);
  border-radius: var(--rmax);
  transition: transform .4s var(--saida), opacity .25s var(--suave);
}
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] .menu-botao__barra:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* =============================================================
   HERÓI
   ============================================================= */

/* ------------------------------------------------------------
   A ALTURA ATÉ AO SELECTOR É ORÇAMENTO, E ESTÁ CONTADA.

   Numa janela de 720 px o selector abria a 829 px — 249 px
   abaixo da dobra — e num telemóvel a 809 px. Cada número
   abaixo foi apertado por causa disso, e a soma é o que põe o
   gesto de compra no primeiro ecrã sem `100vh`:

     padding do herói   88 -> 56
     sobrancelha        18 -> 12
     entrelinha da grelha 36 -> 26
     título             4,1rem -> 3,5rem
     chamada            20 -> 16

   Quem mexer num destes valores está a mexer na dobra. Meça
   antes e depois: o topo do selector tem de ficar dentro dos
   640 px num ecrã estreito.
   ------------------------------------------------------------ */
.heroi {
  position: relative; isolation: isolate;
  padding: clamp(28px, 5vw, 48px) 0 clamp(36px, 5vw, 64px);
}
.heroi__texto .sobrancelha { margin-bottom: 12px; }
.heroi__texto .chamada { margin-top: 16px; }

/* A mancha é LUZ e não superfície: um gradiente radial amarelo,
   desfocado, por trás da coluna de texto. O amarelo entra aqui sem
   nunca ser letra. */
.heroi__mancha {
  position: absolute; z-index: -1; pointer-events: none;
  top: -18%; left: -22%; width: 78%; height: min(760px, 88vh);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 212, 0, .34), rgba(255, 212, 0, 0) 72%);
  filter: blur(30px);
}
.heroi::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 6%; right: -28%; width: 62%; height: min(560px, 62vh);
  background: radial-gradient(50% 50% at 50% 50%, rgba(18, 18, 18, .05), rgba(18, 18, 18, 0) 70%);
  filter: blur(26px);
}

/* Em ecrã estreito é uma coluna só, e a ordem do documento é a
   ordem que se lê: frase de valor, selector, selos. O selector é
   o terceiro elemento da página e tem de caber no primeiro ecrã
   sem `100vh` — ver a nota no topo de hero.blade.php. */
.heroi__grelha { display: grid; gap: clamp(16px, 2.6vw, 26px); align-items: start; }
.heroi__texto h1 { max-width: 15ch; font-size: clamp(2.3rem, 5.2vw, 3.5rem); }

.heroi__secundario { margin-top: 22px; font-size: 14.5px; color: var(--tinta-2); }
.heroi__secundario a {
  color: var(--tinta); font-weight: 550;
  text-decoration-color: var(--linha-forte); text-underline-offset: 4px;
  transition: text-decoration-color .3s var(--suave);
}
.heroi__secundario a:hover { text-decoration-color: var(--tinta); }

.heroi__arte { display: none; }
/* A arte tem tecto. Sem ele, a 1280 px o desenho ficava com 460 px
   de altura e era ele — e não o texto — a mandar na altura da
   primeira linha da grelha, empurrando o selector para fora do
   primeiro ecrã numa janela de 720 px. */
.heroi__arte svg { width: 100%; height: auto; max-width: 340px; margin-inline: auto; }

.onda { transform-origin: 160px 168px; }

.selos { display: grid; gap: 12px; margin-top: 28px; }
.selo {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; color: var(--tinta-2); line-height: 1.5;
}
.selo svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; color: var(--tinta); opacity: .7; }

/* =============================================================
   SELECTOR DE DESTINO
   ============================================================= */

.selector {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r4);
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--sombra-3);
  position: relative;
}

.selector__cabeca { margin-bottom: 14px; }
.selector__titulo {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  letter-spacing: -.02em;
}

.selector__campos { display: grid; gap: 16px; align-items: end; }

.selector__resumo {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--linha);
  font-size: 14px; color: var(--tinta-2);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.selector__resumo a {
  color: var(--tinta); font-weight: 550;
  text-decoration-color: var(--linha-forte); text-underline-offset: 3px;
  transition: text-decoration-color .3s var(--suave);
}
.selector__resumo a:hover { text-decoration-color: var(--tinta); }

/* =============================================================
   CAMPOS
   ============================================================= */

.campo { display: grid; gap: 8px; }
.campo + .campo { margin-top: 16px; }

.campo__rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-2);
}

.campo__caixa {
  display: flex; align-items: center; gap: 10px;
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r2);
  padding: 0 14px;
  transition: border-color .35s var(--suave), box-shadow .35s var(--suave), transform .35s var(--saida);
}
.campo__caixa:focus-within {
  border-color: var(--tinta);
  box-shadow: 0 0 0 4px rgba(255, 212, 0, .24), var(--sombra-2);
  transform: translateY(-1px);
}
.campo__caixa > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--tinta-3); }

.campo__entrada, .campo__seleccao {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  padding: 14px 0; font-family: inherit; font-size: 16px; color: var(--tinta);
}
.campo__entrada::placeholder { color: var(--tinta-3); opacity: 1; }
.campo__entrada:focus-visible, .campo__seleccao:focus-visible { outline: none; box-shadow: none; }

.campo__seleccao {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; padding-right: 8px;
}
.campo__seta { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tinta-3); pointer-events: none; }

.campo__par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.campo__caixa--curta { padding-right: 8px; }

.campo__ajuda { font-size: 13.5px; color: var(--tinta-2); line-height: 1.5; }

/* O erro leva ícone, texto e contorno. Nunca só cor: quem não
   distingue vermelho de cinzento tem de ver o mesmo aviso. */
.campo__erro {
  display: none;
  align-items: flex-start; gap: 8px;
  font-size: 13.5px; color: var(--alerta); line-height: 1.45;
}
.campo__erro svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.campo--erro > .campo__erro { display: flex; }
.campo--erro > .campo__caixa,
.campo--erro > .campo__par > .campo__caixa {
  border-color: var(--alerta);
  background: var(--alerta-fundo);
}

/* -------- fichas de duração --------
   O alvo continua com 40 px de altura em ecrã estreito, que é o
   mínimo para um dedo. O que encolheu foi a folga lateral, e
   encolheu porque são cinco fichas a passar para três linhas num
   telemóvel — 150 px de altura mesmo por cima do botão de
   procurar. */
.fichas { display: flex; flex-wrap: wrap; gap: 7px; }
.ficha { position: relative; }
.ficha input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.ficha span {
  display: inline-flex; align-items: center;
  padding: 9px 13px; border-radius: var(--rmax);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  font-size: 14px; font-weight: 500; color: var(--tinta-2);
  transition: background-color .3s var(--suave), color .3s var(--suave),
              border-color .3s var(--suave), box-shadow .35s var(--suave);
}
.ficha input:hover + span { border-color: var(--tinta); color: var(--tinta); }
.ficha input:checked + span {
  background: var(--tinta); color: var(--tinta-inv); border-color: var(--tinta);
  box-shadow: var(--sombra-2);
}
.ficha input:focus-visible + span {
  outline: 2px solid var(--tinta); outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 212, 0, .32);
}

/* -------- caixa de sugestões do combo --------

   A lista vem AGRUPADA POR REGIÃO, com bandeira à esquerda de cada linha, o
   nome ao meio e o código ISO à direita. A própria região é uma linha, com um
   globo no lugar da bandeira e "Vários países" no lugar do código.

   O cabeçalho de grupo é um <p aria-hidden> dentro de um
   <li role="presentation">; quem anuncia o grupo é o aria-label do
   <ul role="group"> que está lá dentro. Sem o aria-hidden, o leitor de ecrã
   dizia "África" duas vezes seguidas a cada grupo.

   ===================================================================
   AS BANDEIRAS TÊM MEDIDA RESERVADA, E ISSO NÃO É DETALHE.

   20 por 15, declarados no <img> e repetidos aqui. As bandeiras chegam uma a
   uma, depois do resto da linha; sem medida reservada a lista salta enquanto
   elas chegam, e a linha que o dedo ia tocar muda de sítio a meio do gesto.
   Numa lista de destinos isso é escolher o país errado.
   ===================================================================
   -------- */
.combo-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r4);
  padding: 8px;
  max-height: 320px; overflow: auto;
  box-shadow: var(--sombra-4);
  animation: cair .38s var(--saida) both;
}
@keyframes cair {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.combo-lista > li { display: block; }
.combo-grupo + .combo-grupo { margin-top: 6px; }
.combo-grupo__lista { list-style: none; margin: 0; padding: 0; }

.combo-grupo__nome {
  margin: 8px 0 2px; padding: 0 14px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
}

.combo-lista__linha {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer; border-radius: var(--r2);
  transition: background-color .25s var(--suave);
}
.combo-lista__linha:hover,
.combo-lista__linha[aria-selected="true"] { background: var(--papel); }
.combo-lista__linha[aria-selected="true"] {
  background: var(--amarelo-luz);
  box-shadow: inset 3px 0 0 var(--amarelo);
}

.combo-lista__bandeira {
  flex: 0 0 auto;
  width: 20px; height: 15px;
  border-radius: 2px;
  border: 1px solid rgba(18, 18, 18, .14);
  background: var(--papel-2);
  object-fit: cover;
}
/* Ficheiro em falta: fica a caixa, tracejada, e os nomes continuam
   alinhados. O código do país lê-se na coluna da direita. */
.combo-lista__bandeira--vazia { border-style: dashed; }

.combo-lista__globo {
  display: inline-flex; align-items: center; justify-content: center;
  border-color: transparent; background: none; color: var(--tinta-2);
}
.combo-lista__globo svg { width: 20px; height: 15px; }

.combo-lista__nome {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-lista__codigo { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }
/* A etiqueta da região é uma frase, não um código: sai da monoespaçada. */
.combo-lista__linha--regiao .combo-lista__codigo { font-family: var(--sans); font-size: 11.5px; }
.combo-lista__linha--regiao .combo-lista__nome { font-family: var(--sans); font-weight: 650; font-size: .98rem; }
.combo-lista__vazio { display: block; padding: 14px; color: var(--tinta-2); font-size: 14px; cursor: default; }

/* =============================================================
   TIRA DE DESTINOS
   ============================================================= */

.tira {
  overflow: hidden;
  background: linear-gradient(90deg, var(--amarelo) 0%, var(--amarelo-claro) 50%, var(--amarelo) 100%);
  border-top: 1px solid rgba(18, 18, 18, .12);
  border-bottom: 1px solid rgba(18, 18, 18, .12);
  box-shadow: var(--brilho-largo);
}
.tira__pista { display: flex; width: max-content; animation: correr 46s linear infinite; }
.tira__lista { display: flex; align-items: center; }
.tira__item {
  padding: 13px 24px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta);
  white-space: nowrap;
  position: relative;
}
.tira__item::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 4px; height: 4px; border-radius: var(--rmax);
  background: rgba(18, 18, 18, .35); transform: translateY(-50%);
}
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============================================================
   SECÇÕES
   ============================================================= */

.seccao { padding: clamp(52px, 8vw, 104px) 0; position: relative; }
.seccao--papel { background: var(--papel-2); }

.seccao + .seccao:not(.seccao--papel)::before {
  content: ""; position: absolute; top: 0; left: var(--goteira); right: var(--goteira); height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha) 12%, var(--linha) 88%, transparent);
}

.seccao__cabeca { max-width: 68ch; margin-bottom: clamp(30px, 4vw, 52px); }
.seccao__cabeca--centro { margin-inline: auto; text-align: center; }
.seccao__cabeca--centro .sobrancelha { justify-content: center; }
.seccao__lead {
  margin-top: 18px;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--tinta-2); max-width: 62ch;
}
.seccao__cabeca--centro .seccao__lead { margin-inline: auto; }
.seccao__accao { margin-top: clamp(26px, 3.4vw, 40px); text-align: center; }

.nota-fina { margin-top: 16px; font-size: 13.5px; color: var(--tinta-3); line-height: 1.55; }

/* -------- cabeça de página interior -------- */
.cabeca-pagina {
  position: relative; isolation: isolate;
  padding: clamp(24px, 4vw, 44px) 0 clamp(28px, 4vw, 48px);
}
.cabeca-pagina--curta { padding-bottom: 0; }
.cabeca-pagina__mancha {
  position: absolute; z-index: -1; pointer-events: none;
  top: -30%; left: -14%; width: 62%; height: min(520px, 60vh);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 212, 0, .26), rgba(255, 212, 0, 0) 72%);
  filter: blur(30px);
}
.cabeca-pagina h1 { max-width: 18ch; }

.cabeca-pagina__preco {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-top: 24px; font-size: 14px; color: var(--tinta-2);
}
.cabeca-pagina__preco b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600;
  color: var(--tinta); letter-spacing: -.03em;
}
.cabeca-pagina__conta { font-size: 13px; color: var(--tinta-3); }
.cabeca-pagina__voltar { margin-top: 18px; font-size: 14px; }
.cabeca-pagina__voltar a { color: var(--tinta-2); text-underline-offset: 3px; }
.cabeca-pagina__voltar a:hover { color: var(--tinta); }

/* -------- migalhas -------- */
.migalhas { margin-bottom: 22px; font-size: 13px; color: var(--tinta-3); }
.migalhas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.migalhas li { display: flex; align-items: center; gap: 8px; }
.migalhas li + li::before {
  content: ""; width: 5px; height: 5px; border-radius: var(--rmax);
  background: var(--linha-forte);
}
.migalhas a { color: var(--tinta-2); text-decoration: none; }
.migalhas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.migalhas [aria-current="page"] { color: var(--tinta); font-weight: 500; }

/* -------- filtro e procura -------- */
.filtro {
  display: grid; gap: 12px; margin-top: 26px;
  padding: 18px; border: 1px solid var(--linha); border-radius: var(--r3);
  background: var(--branco); box-shadow: var(--sombra-1);
}
.filtro .campo__rotulo { display: block; }

.procura { display: grid; gap: 12px; margin-top: 26px; max-width: 560px; }
.procura__conta { margin-top: 12px; font-size: 13px; color: var(--tinta-2); }

/* =============================================================
   SEGMENTOS (separadores)
   ============================================================= */

.linhas__abas { display: flex; justify-content: center; margin-bottom: clamp(26px, 3.4vw, 40px); }

.segmentos {
  position: relative;
  display: flex; gap: 4px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--rmax);
  padding: 5px;
  box-shadow: var(--sombra-2);
  max-width: 100%; overflow-x: auto;
  scrollbar-width: none;
}
.segmentos::-webkit-scrollbar { display: none; }

.segmentos__botao {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  padding: 11px 18px; white-space: nowrap;
  border-radius: var(--rmax);
  font-size: 14.5px; font-weight: 550; color: var(--tinta-2);
  transition: color .32s var(--suave);
}
.segmentos__botao svg { width: 18px; height: 18px; }
.segmentos__botao:hover { color: var(--tinta); }
.segmentos__botao[aria-selected="true"] { color: var(--tinta-inv); }
.segmentos__botao[aria-selected="true"] .segmentos__conta {
  background: rgba(250, 249, 246, .2); color: var(--tinta-inv);
}
.segmentos__botao[data-vazio] { opacity: .55; }

.segmentos__conta {
  font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: var(--rmax);
  background: var(--papel-2); color: var(--tinta-2);
  transition: background-color .32s var(--suave), color .32s var(--suave);
}

/* A pastilha que desliza por baixo do separador activo. É
   posicionada por JavaScript; sem ele, nunca ganha largura e o
   separador desaparece por inteiro — que é o comportamento certo,
   porque nesse caso os painéis mostram-se todos. */
.segmentos__barra {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
  background: var(--tinta);
  border-radius: var(--rmax);
  box-shadow: var(--sombra-2);
  transition: transform .5s var(--saida), width .5s var(--saida);
}

.painel { animation: entrar .5s var(--saida) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.painel:focus-visible { outline-offset: 8px; }
.painel__titulo { display: none; }
.painel__nota {
  max-width: 68ch; margin-bottom: clamp(22px, 3vw, 32px);
  font-size: 14.5px; color: var(--tinta-2); line-height: 1.6;
}

/* ------------------------------------------------------------
   SEM JAVASCRIPT: os painéis mostram-se TODOS, um a seguir ao
   outro, cada um com o seu título; e o separador desaparece,
   porque um separador que não separa é só um botão que não faz
   nada. Nenhuma oferta e nenhuma linha de produto fica escondida
   atrás de um script.
   ------------------------------------------------------------ */
html:not(.com-js) .linhas__abas { display: none; }
html:not(.com-js) .painel { display: block !important; animation: none; }
html:not(.com-js) .painel[hidden] { display: block !important; }
html:not(.com-js) .painel__titulo {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
html:not(.com-js) .painel + .painel { margin-top: clamp(36px, 5vw, 64px); }

/* =============================================================
   LINHAS DE PRODUTO
   ============================================================= */

.linha-produto { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: var(--rmax);
  background: var(--amarelo);
  color: var(--tinta);
  font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--brilho);
  margin-bottom: 18px;
}
.etiqueta svg { width: 17px; height: 17px; }

.linha-produto__lead {
  margin-top: 16px; margin-bottom: 24px;
  font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--tinta-2);
}

.lista-vantagens { display: grid; gap: 12px; margin-bottom: 24px; }
.lista-vantagens li {
  position: relative; padding-left: 30px;
  font-size: 15px; color: var(--tinta-2); line-height: 1.55;
}
.lista-vantagens li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: var(--rmax);
  background: var(--amarelo-luz);
}
.lista-vantagens li::after {
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta);
  transform: rotate(-45deg);
}

.lista-numerada { display: grid; gap: 14px; counter-reset: passo; }
.lista-numerada li {
  position: relative; padding-left: 38px; counter-increment: passo;
  font-size: 15px; color: var(--tinta-2); line-height: 1.55;
}
.lista-numerada li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: var(--r1);
  display: grid; place-items: center;
  background: var(--papel-2); border: 1px solid var(--linha);
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--tinta);
}

.destaque {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--amarelo-luz);
  border: 1px solid rgba(18, 18, 18, .07);
  border-radius: var(--r3);
  padding: 18px 20px; margin-bottom: 24px;
}
.destaque svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 2px; color: var(--tinta); }
.destaque p { font-size: 14.5px; line-height: 1.58; }
.destaque--sobrio { background: var(--branco); border-color: var(--linha); box-shadow: var(--sombra-1); }
.destaque--sobrio p { color: var(--tinta-2); }

.sectores__titulo {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-2); margin-bottom: 14px;
}

.destinos { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.destino {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--rmax);
  background: var(--branco); border: 1px solid var(--linha);
  text-decoration: none; font-size: 14px; color: var(--tinta-2);
  box-shadow: var(--sombra-1);
  transition: transform .38s var(--saida), box-shadow .38s var(--suave),
              border-color .3s var(--suave), color .3s var(--suave);
}
.destino svg { width: 16px; height: 16px; opacity: .6; }
.destino:hover {
  transform: translateY(-2px); box-shadow: var(--sombra-2);
  border-color: var(--tinta); color: var(--tinta);
}

.cobertura { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--tinta-2); }
.cobertura svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--tinta); }
.cobertura a { color: var(--tinta); text-underline-offset: 3px; }

/* =============================================================
   PROVAS
   ============================================================= */

.provas {
  background: linear-gradient(160deg, var(--amarelo-claro) 0%, var(--amarelo) 55%, #F2C800 100%);
  padding: clamp(36px, 5vw, 60px) 0;
  border-top: 1px solid rgba(18, 18, 18, .1);
  border-bottom: 1px solid rgba(18, 18, 18, .1);
}
.provas__grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.prova { color: var(--tinta); }
.prova__valor {
  display: block;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 600;
  letter-spacing: -.04em; line-height: 1;
}
.prova__texto { margin-top: 9px; font-size: 13.5px; line-height: 1.5; }

/* =============================================================
   O BLOCO ESCURO — uma secção por página
   =============================================================
   A ÚNICA superfície do site onde o amarelo pode ser TINTA.
   Sobre #0B0B0B dá 13,7:1; sobre branco daria 1,4:1 e não se lia.
   ============================================================= */

.bloco-escuro {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--noite); color: var(--tinta-inv);
  padding: clamp(52px, 8vw, 104px) 0;
}
.bloco-escuro::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -34%; left: -10%; width: 74%; height: 150%;
  background: radial-gradient(46% 46% at 50% 50%, rgba(255, 212, 0, .26), rgba(255, 212, 0, 0) 70%);
  filter: blur(32px);
}
.bloco-escuro::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: -48%; right: -16%; width: 64%; height: 120%;
  background: radial-gradient(46% 46% at 50% 50%, rgba(255, 212, 0, .14), rgba(255, 212, 0, 0) 70%);
  filter: blur(34px);
}
.bloco-escuro .sobrancelha { color: var(--noite-texto); }

.activacao__grelha { display: grid; gap: clamp(30px, 5vw, 56px); align-items: start; }

.activacao__titulo {
  color: var(--amarelo);
  max-width: 16ch;
  text-shadow: 0 0 60px rgba(255, 212, 0, .3);
}
.activacao__assinatura {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--noite-linha);
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.32; letter-spacing: -.02em;
  color: var(--amarelo);
}
.activacao__lead { font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.65; color: var(--tinta-inv); }
.activacao__meta { margin-top: 16px; font-size: 15px; color: var(--noite-texto); line-height: 1.62; }
.activacao__nota { margin-top: 20px; font-size: 13.5px; color: var(--noite-texto); line-height: 1.6; }

.garantia {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--amarelo); color: var(--tinta);
  border-radius: var(--rmax); padding: 9px 18px 9px 14px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 22px;
  box-shadow: 0 6px 22px rgba(255, 212, 0, .34), 0 20px 54px rgba(255, 212, 0, .2);
}
.garantia svg { width: 17px; height: 17px; }
.garantia--aviso { background: var(--amarelo-claro); }
.garantia--espera {
  background: none; color: var(--tinta-2);
  border: 1px solid var(--linha-forte);
  box-shadow: none;
}

.passos-noite {
  margin-top: clamp(24px, 3.4vw, 34px);
  background: var(--noite-2);
  border: 1px solid var(--noite-linha);
  border-radius: var(--r4);
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: var(--sombra-noite);
}
.passo-noite { display: flex; gap: 16px; padding: 15px 0; align-items: flex-start; }
.passo-noite + .passo-noite { border-top: 1px solid var(--noite-linha); }
.passo-noite__numero {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  background: rgba(255, 212, 0, .12); color: var(--amarelo);
  border: 1px solid rgba(255, 212, 0, .26);
}
.passo-noite h3 {
  font-family: var(--sans); font-size: 15.5px; font-weight: 650;
  letter-spacing: 0; margin-bottom: 5px; color: var(--tinta-inv);
}
.passo-noite p { font-size: 14.5px; color: var(--noite-texto); line-height: 1.56; }

/* =============================================================
   COMPARAÇÃO
   ============================================================= */

.comparacao {
  overflow-x: auto;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  box-shadow: var(--sombra-2);
}
.comparacao table { width: 100%; border-collapse: collapse; min-width: 620px; }
.comparacao th, .comparacao td {
  padding: 16px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linha);
  font-size: 14.5px;
}
.comparacao thead th {
  font-family: var(--sans); font-size: 12px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2);
  border-bottom-color: var(--linha-forte);
}
.comparacao tbody th { font-weight: 600; color: var(--tinta); width: 30%; }
.comparacao tbody tr:last-child th,
.comparacao tbody tr:last-child td { border-bottom: 0; }
.comparacao td { color: var(--tinta-2); }
.destaque-coluna { background: var(--amarelo-luz); }
.comparacao thead .destaque-coluna { color: var(--tinta); background: var(--amarelo); }

.marca-sim, .marca-nao { display: flex; gap: 9px; align-items: flex-start; }
.marca-sim svg, .marca-nao svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.marca-sim { color: var(--tinta); }
.marca-nao { color: var(--tinta-3); }
.comparacao__nota { margin-top: 20px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.6; max-width: 70ch; }

/* =============================================================
   PACOTES
   ============================================================= */

.pacotes__grelha {
  display: grid; gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pacote {
  position: relative;
  display: flex; flex-direction: column; gap: 13px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--sombra-1);
  transition: transform .5s var(--saida), box-shadow .5s var(--suave), border-color .4s var(--suave);
}
.pacote:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); border-color: var(--linha-forte); }

.pacote--destaque { border-color: var(--tinta); box-shadow: var(--sombra-2), var(--brilho); }
.pacote__destaque {
  position: absolute; top: -11px; left: clamp(20px, 2.6vw, 28px);
  background: var(--amarelo); color: var(--tinta);
  border-radius: var(--rmax); padding: 4px 12px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--brilho);
}

.pacote__duracao { font-size: 13px; color: var(--tinta-2); letter-spacing: -.01em; }
.pacote__duracao .mono { font-weight: 600; color: var(--tinta); }
.pacote__volume {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); font-weight: 500;
  line-height: 1; letter-spacing: -.045em;
}

.pacote__linhas { display: grid; gap: 9px; }
.pacote__linhas li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--tinta-2); line-height: 1.45;
}
.pacote__linhas svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; opacity: .55; }

.pacote__preco {
  display: flex; flex-direction: column; gap: 3px;
  border-top: 1px solid var(--linha); padding-top: 15px;
}
.pacote__rotulo { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.pacote__valor { font-size: clamp(1.5rem, 2.6vw, 1.85rem); font-weight: 600; letter-spacing: -.035em; }
.pacote__unitario { font-size: 12.5px; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 6px; }

.pacote__activacao {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--amarelo-luz); border-radius: var(--r2);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.42;
}
.pacote__activacao svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }

.pacote .botao { margin-top: auto; }

.pacotes__nota { margin-top: 20px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.6; max-width: 72ch; }
.pacotes__vazio {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--amarelo);
  border-radius: var(--r3);
  padding: clamp(20px, 3vw, 28px);
  max-width: 68ch; color: var(--tinta-2); font-size: 15px; line-height: 1.6;
  box-shadow: var(--sombra-1);
}
.pacotes__vazio--suave { border-left-color: var(--linha-forte); box-shadow: none; }

/* =============================================================
   LISTA DE DESTINOS
   ============================================================= */

.iniciais {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: clamp(26px, 3.4vw, 36px);
  padding-bottom: 20px; border-bottom: 1px solid var(--linha);
}
.iniciais a {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: var(--r2);
  background: var(--branco); border: 1px solid var(--linha);
  text-decoration: none; font-size: 13px; font-weight: 600; color: var(--tinta-2);
  transition: background-color .3s var(--suave), color .3s var(--suave),
              border-color .3s var(--suave), transform .35s var(--saida);
}
.iniciais a:hover {
  background: var(--tinta); color: var(--tinta-inv); border-color: var(--tinta);
  transform: translateY(-2px);
}

.destinos-lista { display: grid; gap: clamp(30px, 4vw, 48px); }
.destinos-grupo { display: grid; gap: 14px; scroll-margin-top: 96px; }
.destinos-grupo__inicial {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; color: var(--tinta-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--linha);
}

.destinos-grelha {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.destino-cartao {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--r2);
  background: var(--branco); border: 1px solid var(--linha);
  text-decoration: none; box-shadow: var(--sombra-1);
  transition: transform .4s var(--saida), box-shadow .4s var(--suave), border-color .3s var(--suave);
}
.destino-cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--linha-forte); }
.destino-cartao__nome { flex: 1 1 auto; font-size: 15px; font-weight: 500; }
.destino-cartao__codigo { font-size: 11.5px; color: var(--tinta-3); letter-spacing: .06em; }
.destino-cartao__seta {
  width: 17px; height: 17px; flex: 0 0 auto; color: var(--tinta-3);
  opacity: 0; transform: translateX(-5px);
  transition: opacity .3s var(--suave), transform .38s var(--saida);
}
.destino-cartao:hover .destino-cartao__seta { opacity: 1; transform: none; }

/* =============================================================
   FICHA DO PRODUTO
   ============================================================= */

.ficha { max-width: 900px; }
.ficha__linha {
  display: grid; gap: 8px;
  padding: 20px 0; border-top: 1px solid var(--linha);
}
.ficha__linha:first-child { border-top: 0; }
.ficha__linha dt {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase;
}
.ficha__icone {
  width: 34px; height: 34px; border-radius: var(--r2); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--branco); border: 1px solid var(--linha);
  box-shadow: var(--sombra-1);
}
.ficha__icone svg { width: 17px; height: 17px; }
.ficha__linha dd { margin: 0; color: var(--tinta-2); font-size: 15px; line-height: 1.6; }
.ficha__detalhe { margin-top: 8px; font-size: 13.5px; color: var(--tinta-3); }

/* "Não sabemos" tem de PARECER "não sabemos", e não uma
   característica do produto. Fio à esquerda e itálico: lê-se como
   uma nota do vendedor, que é o que é. */
.ficha__vazio, .ficha__detalhe--vazio {
  font-style: italic; color: var(--tinta-3);
  border-left: 1px solid var(--linha-forte);
  padding-left: 12px;
}

.ficha__linha--chave {
  margin-top: 18px; padding: clamp(18px, 2.6vw, 26px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--amarelo);
  border-radius: var(--r3);
  box-shadow: var(--sombra-2);
}
.ficha__linha--chave dd {
  color: var(--tinta); font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 500; font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.34; letter-spacing: -.02em;
}
.ficha__linha--chave .ficha__icone {
  background: var(--amarelo); border-color: rgba(18, 18, 18, .12);
  box-shadow: var(--brilho);
}

/* =============================================================
   EMPRESAS
   ============================================================= */

.empresas__grelha { display: grid; gap: clamp(30px, 4vw, 52px); align-items: start; }
.empresas__botoes { display: flex; flex-wrap: wrap; gap: 12px; }

.sectores {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r3); padding: clamp(20px, 2.6vw, 26px);
  box-shadow: var(--sombra-1); margin-bottom: 22px;
}
.sectores__lista { display: grid; gap: 12px; }
.sectores__lista li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--tinta-2); }
.sectores__lista svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--tinta); opacity: .65; }

.factura {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r3); overflow: hidden;
  box-shadow: var(--sombra-2);
}
.factura__cabeca {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 15px 20px; background: var(--papel-2);
  border-bottom: 1px solid var(--linha);
  font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.factura__selo {
  background: var(--amarelo); color: var(--tinta);
  padding: 4px 10px; border-radius: var(--rmax);
  letter-spacing: .06em;
}
.factura__corpo { padding: 8px 20px 18px; }
.factura__linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--linha);
  font-size: 14px; color: var(--tinta-2);
}
.factura__linha--total { border-bottom: 0; font-weight: 650; color: var(--tinta); }
.factura__valor {
  font-family: var(--mono); font-size: 13px; color: var(--tinta-3);
  white-space: nowrap;
}

/* =============================================================
   DIÁSPORA
   ============================================================= */

.diaspora__grelha { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
.diaspora__arte svg { width: 100%; height: auto; }
.diaspora__rotulo {
  font-family: var(--sans); font-size: 14px; font-weight: 650; fill: var(--tinta);
}
.rota-traco { stroke-dasharray: 260; stroke-dashoffset: 260; }
.esta-visivel .rota-traco { animation: tracar 1.6s var(--saida) forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }

/* =============================================================
   PASSOS
   ============================================================= */

.passos { display: grid; gap: clamp(20px, 3vw, 30px); }
.passo {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r3); padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--sombra-1);
  transition: transform .5s var(--saida), box-shadow .5s var(--suave);
}
.passo:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.passo__numero {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r2);
  display: grid; place-items: center;
  background: var(--amarelo); color: var(--tinta);
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  box-shadow: var(--brilho);
}
.passo h3 { font-size: 1.15rem; margin-bottom: 7px; }
.passo p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.58; }

.antes {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r3); padding: clamp(20px, 2.6vw, 28px);
  margin-bottom: clamp(26px, 3.4vw, 38px);
  box-shadow: var(--sombra-1); max-width: 72ch;
}
.antes h3 { margin-bottom: 16px; }

.caminhos {
  display: grid; gap: clamp(16px, 2.2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: clamp(28px, 4vw, 44px);
}
.caminho {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r3); padding: clamp(20px, 2.6vw, 26px);
  box-shadow: var(--sombra-1);
  transition: transform .5s var(--saida), box-shadow .5s var(--suave);
}
.caminho:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.caminho__icone {
  width: 42px; height: 42px; border-radius: var(--r2);
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--amarelo-luz); border: 1px solid rgba(18, 18, 18, .07);
}
.caminho__icone svg { width: 21px; height: 21px; }
.caminho h3 { font-size: 1.1rem; margin-bottom: 9px; }
.caminho p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.58; }

.sistemas { display: grid; gap: clamp(20px, 3vw, 30px); }
.sistema {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r3); padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--sombra-1);
}
.sistema h3 { margin-bottom: 16px; }

.par-notas { display: grid; gap: clamp(26px, 4vw, 44px); }

/* =============================================================
   COMPATIBILIDADE
   ============================================================= */

.verificador {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r4); padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--sombra-3);
}
.verificador__resposta:not(:empty) {
  margin-top: 20px; padding: 18px 20px;
  border-radius: var(--r3);
  background: var(--papel-2); border: 1px solid var(--linha);
  animation: entrar .45s var(--saida) both;
}
.verificador__resposta h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 650; margin-bottom: 7px; }
.verificador__resposta p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.58; }
.verificador__resposta[data-tipo="sim"] { background: var(--amarelo-luz); border-color: rgba(18, 18, 18, .1); }
.verificador__resposta[data-tipo="nao"] { background: var(--alerta-fundo); border-color: rgba(179, 38, 30, .2); }
.verificador__nota { margin-top: 18px; font-size: 13.5px; color: var(--tinta-3); line-height: 1.6; }
.verificador__accao { margin-top: 18px; }

/* =============================================================
   PERGUNTAS
   ============================================================= */

.perguntas {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r3); overflow: hidden;
  box-shadow: var(--sombra-2);
}
.pergunta + .pergunta { border-top: 1px solid var(--linha); }
.pergunta summary {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px clamp(18px, 2.4vw, 26px);
  cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 550;
  transition: background-color .3s var(--suave);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { background: var(--papel); }
.pergunta__sinal {
  position: relative; width: 16px; height: 16px; flex: 0 0 auto;
}
.pergunta__sinal::before, .pergunta__sinal::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--tinta); border-radius: var(--rmax);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--saida), opacity .3s var(--suave);
}
.pergunta__sinal::before { width: 14px; height: 1.6px; }
.pergunta__sinal::after { width: 1.6px; height: 14px; }
.pergunta[open] .pergunta__sinal::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.pergunta__corpo {
  padding: 0 clamp(18px, 2.4vw, 26px) 22px;
  font-size: 15px; color: var(--tinta-2); line-height: 1.65;
  max-width: 74ch;
}

/* =============================================================
   CHECKOUT
   ============================================================= */

.checkout { display: grid; gap: clamp(22px, 3vw, 34px); align-items: start; }

.checkout__caixa {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r4); padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--sombra-3);
  scroll-margin-top: 96px;
}

.checkout__passos { display: grid; gap: clamp(26px, 3.4vw, 38px); }
.checkout__passo {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px 16px; align-items: center;
}
.checkout__numero {
  grid-row: 1; grid-column: 1;
  width: 40px; height: 40px; border-radius: var(--r2);
  display: grid; place-items: center;
  background: var(--amarelo); color: var(--tinta);
  font-size: 15px; font-weight: 600;
  box-shadow: var(--brilho);
}
.checkout__passo h2 { grid-row: 1; grid-column: 2; font-size: 1.2rem; }
.checkout__passo > div { grid-column: 1 / -1; }
.checkout__passo > div > p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.6; margin-bottom: 18px; }

.checkout__accao { margin-top: clamp(26px, 3.4vw, 34px); padding-top: 22px; border-top: 1px solid var(--linha); }
.checkout__nota { margin-top: 12px; font-size: 13px; color: var(--tinta-3); line-height: 1.58; }
.checkout__confirmado {
  margin-top: 14px; padding: 12px 14px;
  background: var(--amarelo-luz); border-radius: var(--r2);
  font-size: 13.5px; line-height: 1.55;
}

.checkout__resumo {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r4); padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--sombra-2);
  position: relative;
}
.checkout__resumo h2 { font-size: 1.1rem; margin-bottom: 18px; }

.resumo__linhas { display: grid; gap: 2px; }
.resumo__linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
  font-size: 14px;
}
.resumo__rotulo { color: var(--tinta-2); }
.resumo__valor { font-weight: 600; text-align: right; }
.resumo__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-top: 18px; padding: 16px 18px;
  background: var(--amarelo); border-radius: var(--r3);
  font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta);
  box-shadow: var(--brilho);
}
.resumo__total .resumo__valor {
  font-size: 1.35rem; letter-spacing: -.03em; text-transform: none;
}
.resumo__activacao {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 16px; font-size: 13px; color: var(--tinta-2); line-height: 1.45;
}
.resumo__activacao svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.resumo__trocar { margin-top: 14px; font-size: 13.5px; }
.resumo__trocar a { color: var(--tinta); text-underline-offset: 3px; }
.resumo__vazio-titulo { font-weight: 600; margin-bottom: 10px; }

/* -------- meios de pagamento -------- */
.meios { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.meios legend { padding: 0; margin-bottom: 12px; }

.meio { position: relative; display: block; cursor: pointer; }
.meio input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.meio__corpo {
  display: grid; gap: 5px;
  padding: 16px 18px; border-radius: var(--r3);
  background: var(--branco); border: 1px solid var(--linha-forte);
  transition: border-color .3s var(--suave), box-shadow .4s var(--suave), transform .4s var(--saida);
}
.meio input:hover + .meio__corpo { border-color: var(--tinta); }
.meio input:checked + .meio__corpo {
  border-color: var(--tinta);
  box-shadow: var(--sombra-2), var(--brilho);
  transform: translateY(-2px);
}
.meio input:focus-visible + .meio__corpo {
  outline: 2px solid var(--tinta); outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 212, 0, .32);
}
.meio__nome { font-size: 15.5px; font-weight: 650; }
.meio__texto { font-size: 13.5px; color: var(--tinta-2); line-height: 1.5; }
.meio__nota {
  font-size: 12.5px; color: var(--tinta-3); line-height: 1.45;
  padding-left: 12px; border-left: 1px solid var(--linha-forte);
}

/* -------- o sítio do pagamento, enquanto não houver meio ligado -------- */
.pagamento {
  background: var(--papel-2);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r3);
  padding: clamp(18px, 2.4vw, 26px);
  display: grid; gap: 12px;
}
.pagamento__etiqueta {
  justify-self: start;
  background: var(--amarelo); color: var(--tinta);
  padding: 4px 12px; border-radius: var(--rmax);
  font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.pagamento p { font-size: 14px; color: var(--tinta-2); line-height: 1.6; }
.pagamento .botao { justify-self: start; }

/* -------- estado do pagamento -------- */
.estado-pagamento { display: grid; gap: 16px; margin-bottom: clamp(26px, 3.4vw, 38px); scroll-margin-top: 96px; }

.aviso {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--branco); border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-forte);
  border-radius: var(--r3); padding: clamp(18px, 2.4vw, 24px);
  box-shadow: var(--sombra-2);
}
.aviso > svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; color: var(--tinta-2); }
.aviso h2 { font-size: 1.1rem; margin-bottom: 7px; }
.aviso p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.6; }
.aviso .botao { margin-top: 14px; }
.aviso--erro { border-left-color: var(--alerta); background: var(--alerta-fundo); }
.aviso--erro > svg { color: var(--alerta); }
.aviso--espera { border-left-color: var(--amarelo); }

.iniciacao {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r4); padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--sombra-3);
}
.iniciacao h2 { font-size: 1.2rem; margin-bottom: 16px; }

.referencia {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 18px;
}
.referencia > div {
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: var(--r2); padding: 14px 16px;
}
.referencia dt {
  font-size: 11px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px;
}
.referencia dd { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: .02em; }

.estado-pagamento__referencia {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  margin-top: 14px; font-size: 13px; color: var(--tinta-2);
}
.estado-pagamento__referencia b { font-size: 15px; color: var(--tinta); letter-spacing: .06em; }

/* =============================================================
   ENDEREÇO NÃO ENCONTRADO

   O número é grande e é decoração: vai com aria-hidden, porque
   quem ouve a página já recebeu "Endereço não encontrado" na
   sobrancelha e "404" lido a seguir não acrescenta nada.
   ============================================================= */

.erro__codigo {
  margin-top: 18px;
  font-size: clamp(3.4rem, 12vw, 6rem); font-weight: 600;
  line-height: .9; letter-spacing: -.05em;
  color: var(--tinta-3); opacity: .5;
}
.erro__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.erro__ajuda { margin-top: clamp(24px, 3vw, 34px); }

/* =============================================================
   APOIO
   ============================================================= */

.apoio {
  background: linear-gradient(155deg, var(--amarelo-claro) 0%, var(--amarelo) 55%, #F2C800 100%);
  padding: clamp(48px, 7vw, 84px) 0;
  border-top: 1px solid rgba(18, 18, 18, .1);
}
.apoio__interior { text-align: center; color: var(--tinta); }
.apoio__interior .sobrancelha { color: rgba(18, 18, 18, .68); justify-content: center; }
.apoio__lead {
  margin: 18px auto 0; max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6;
}
.apoio__botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.apoio .botao--contorno { border-color: rgba(18, 18, 18, .28); background: rgba(255, 255, 255, .72); }
.apoio .botao--contorno:hover { background: var(--branco); }
.apoio__meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
  margin-top: 26px; font-size: 13.5px; color: rgba(18, 18, 18, .74);
}
.apoio__separador { color: rgba(18, 18, 18, .4); }

/* =============================================================
   RODAPÉ — a segunda superfície escura
   ============================================================= */

.rodape {
  position: relative; overflow: hidden;
  background: var(--noite); color: var(--tinta-inv);
  padding: clamp(44px, 6vw, 76px) 0 32px;
}
.rodape::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 212, 0, .5), transparent);
}
.rodape a { color: var(--tinta-inv); }

.rodape__interior { display: grid; gap: clamp(28px, 4vw, 44px); }
.rodape__marca .marca__texto { color: var(--tinta-inv); font-size: 22px; }
.rodape__marca p { margin-top: 14px; font-size: 14.5px; color: var(--noite-texto); max-width: 34ch; line-height: 1.58; }
.rodape__local { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; }
.rodape__local svg { width: 16px; height: 16px; color: var(--amarelo); }

.rodape__ligacoes { display: grid; gap: clamp(22px, 3vw, 34px); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.rodape__grupo {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--noite-texto); margin-bottom: 14px;
}
.rodape__ligacoes li { margin-bottom: 9px; font-size: 14.5px; }
.rodape__ligacoes a {
  text-decoration: none;
  background-image: linear-gradient(var(--amarelo), var(--amarelo));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .4s var(--saida), color .3s var(--suave);
}
.rodape__ligacoes a:hover { background-size: 100% 1px; color: var(--amarelo); }

.rodape__redes { display: flex; flex-wrap: wrap; gap: 10px; }
.rodape__redes a {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r2);
  border: 1px solid var(--noite-linha);
  transition: border-color .3s var(--suave), transform .38s var(--saida);
}
.rodape__redes a:hover { border-color: var(--amarelo); transform: translateY(-2px); }
.rodape__redes svg { width: 18px; height: 18px; }

.rodape__contacto p { margin-bottom: 9px; font-size: 14.5px; }
.rodape__contacto a { text-underline-offset: 3px; }
.rodape__legal { color: var(--noite-texto); font-size: 13px; margin-top: 14px; }

.rodape__base {
  margin-top: clamp(34px, 4.4vw, 54px); padding-top: 20px;
  border-top: 1px solid var(--noite-linha);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--noite-texto);
}
.rodape__topo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: color .3s var(--suave);
}
.rodape__topo svg { width: 16px; height: 16px; transition: transform .4s var(--saida); }
.rodape__topo:hover { color: var(--amarelo); }
.rodape__topo:hover svg { transform: translateY(-3px); }

/* =============================================================
   BARRA DE ACÇÃO (ecrã pequeno)
   ============================================================= */

.barra-accao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; gap: 10px;
  padding: 12px var(--goteira) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 249, 246, .9);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -2px 6px rgba(18, 18, 18, .04), 0 -12px 32px rgba(18, 18, 18, .08);
  transform: translateY(110%);
  transition: transform .5s var(--saida);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra-accao { -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
.barra-accao[hidden] { display: none; }
.barra-accao.esta-visivel { transform: none; }
.barra-accao .botao { flex: 1 1 0; }

/* =============================================================
   BOTÃO DE WHATSAPP FIXO

   Redondo, canto inferior direito, em todas as páginas do site público. O
   painel de administração tem molde próprio e não o leva.

   NASCE COM `hidden` E PODE FICAR ASSIM. O número está em js/config.js e
   ainda é um exemplo; `numeroDeVerdade()` em js/site.js é que o mostra, e só
   quando lá estiver um número a sério.

   TRÊS MEDIDAS QUE NÃO SÃO GOSTO:

   1. 56 px de lado. O mínimo recomendado para um alvo de dedo é 44; abaixo
      disso quem tem o telemóvel numa mão e a mala na outra falha o toque.

   2. z-index 54, um abaixo da barra de acção. Se alguma vez se cruzarem, é
      a barra — que leva ao pagamento — que fica por cima.

   3. Sobe quando a barra de acção aparece. O selector é de irmão adjacente e
      NÃO um `:has()`: o `:has()` não chega a boa parte dos telemóveis que
      compram aqui, e o botão a tapar o "Continuar" no telemóvel era o
      defeito exacto que isto existe para não ter.
   ============================================================= */

.wa-flutuante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 54;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid rgba(18, 18, 18, .12);
  border-radius: 50%;
  background: var(--branco);
  color: var(--tinta);
  box-shadow: var(--sombra-3);
  transition: transform .28s var(--suave), box-shadow .28s var(--suave), bottom .5s var(--saida);
}
.wa-flutuante[hidden] { display: none; }
.wa-flutuante svg { width: 27px; height: 27px; }
.wa-flutuante:hover { transform: translateY(-2px); box-shadow: var(--sombra-4); }
.wa-flutuante:focus-visible {
  outline: 2px solid var(--tinta); outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 212, 0, .32);
}

.barra-accao.esta-visivel ~ .wa-flutuante {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  .wa-flutuante { right: 24px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-flutuante { transition: none; }
}

/* =============================================================
   PÁGINA DE DESTINO — as duas colunas

   À esquerda o destino (arte e detalhes), à direita a compra. No
   HTML a compra vem PRIMEIRO, porque em ecrã estreito as colunas
   empilham pela ordem do documento e a primeira coisa que tem de
   aparecer é o que se compra — não uma imagem e uma tabela de
   características. A troca de sítio em ecrã largo faz-se com
   `grid-column`, que é para isso que serve.
   ============================================================= */

.seccao--destino { padding-top: clamp(26px, 3.6vw, 42px); }

.destino__grelha { display: grid; gap: clamp(30px, 4vw, 52px); align-items: start; }

.destino__nome {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 16px; margin-top: 4px;
  max-width: 20ch;
}
.destino__bandeira {
  width: 44px; height: 30px; flex: 0 0 auto;
  border-radius: 5px; border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-1); object-fit: cover;
}
.destino__compra > .chamada { margin-top: 16px; max-width: 58ch; }

.destino__desde {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: 20px; font-size: 14px; color: var(--tinta-2);
}
.destino__desde b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600;
  color: var(--tinta); letter-spacing: -.03em;
}
.destino__desde-nota { font-size: 13px; color: var(--tinta-3); }

/* -------- a faixa de garantias --------
   Está no lugar onde a referência põe as estrelas, e diz só coisas
   que se podem verificar. A AfroChip não tem avaliações; inventar
   uma é fabricar prova falsa. */
.garantias {
  display: grid; gap: 11px;
  margin-top: clamp(20px, 2.8vw, 28px);
  padding: 16px 18px;
  background: var(--amarelo-luz);
  border: 1px solid rgba(18, 18, 18, .08);
  border-radius: var(--r3);
}
.garantia-facto {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.45; color: var(--tinta);
}
.garantia-facto svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

.destino__verificar { margin-top: 18px; }

/* -------- a arte do destino --------
   Não há fotografia licenciada e não se vai buscar imagens à
   internet: isto é arte nossa, vectorial, servida do nosso
   domínio. Cobre os destinos todos e nunca deixa um buraco no dia
   em que entrar um país novo. */
.arte-destino {
  /* Um `figure` traz 40 px de margem lateral por omissão do browser, e a
     folha de reposição não lhe toca: sem esta linha a arte ficava
     encolhida e desalinhada do cartão de detalhes que está por baixo. */
  margin: 0;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r4);
  border: 1px solid rgba(18, 18, 18, .1);
  box-shadow: var(--sombra-2);
  min-height: clamp(180px, 30vw, 260px);
  display: flex; align-items: flex-end;
}
.arte-destino__fundo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
}
.arte-destino__corpo {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: clamp(18px, 2.6vw, 26px);
}
.arte-destino__selo {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: var(--rmax);
  background: var(--branco);
  box-shadow: var(--sombra-2);
  color: var(--tinta);
}
.arte-destino__selo img { width: 40px; height: 27px; border-radius: 3px; object-fit: cover; }
.arte-destino__selo svg { width: 32px; height: 32px; }
.arte-destino__legenda { display: grid; gap: 5px; min-width: 0; }
.arte-destino__nome {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.05;
  letter-spacing: -.02em; color: var(--tinta);
  overflow-wrap: anywhere;
}
.arte-destino__codigo {
  font-size: 12px; font-weight: 600; letter-spacing: .22em;
  color: rgba(18, 18, 18, .62);
}

/* -------- o cartão "Detalhes do eSIM" -------- */
.detalhes {
  margin-top: clamp(20px, 2.6vw, 28px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  padding: clamp(20px, 2.6vw, 26px);
  box-shadow: var(--sombra-1);
}
.detalhes__titulo { font-size: clamp(1.15rem, 2vw, 1.35rem); letter-spacing: -.02em; }
.detalhes__nota { margin-top: 8px; font-size: 13px; color: var(--tinta-3); line-height: 1.5; }
.detalhes__lista { margin-top: 18px; display: grid; }
.detalhes__linha {
  display: grid; gap: 4px;
  padding: 14px 0; border-top: 1px solid var(--linha);
}
.detalhes__linha:first-child { border-top: 0; padding-top: 0; }
.detalhes__linha dt {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3);
}
.detalhes__linha dd { font-size: 14px; color: var(--tinta-2); line-height: 1.5; }
.detalhes__linha dd p + p { margin-top: 6px; }
.detalhes__extra { color: var(--tinta); }
.detalhes__extra--vazio { color: var(--tinta-3); font-style: italic; }

/* A activação não é uma linha de ficha técnica como as outras:
   nenhum concorrente dá esta garantia. */
.detalhes__linha--chave {
  background: var(--amarelo-luz);
  border-radius: var(--r2);
  padding: 14px 16px; margin-top: 6px;
  border-top-color: transparent;
}
.detalhes__linha--chave dt { color: var(--tinta); }
.detalhes__linha--chave dd { color: var(--tinta); font-weight: 500; }

/* =============================================================
   O AJUDANTE DE VOLUME

   "De quantos gigas preciso?" — o maior problema por resolver do
   sector. Duas perguntas, um formulário GET, resposta com endereço
   próprio. Marca a grelha; nunca esconde cartões.
   ============================================================= */

.ajudante {
  margin-top: clamp(30px, 4vw, 44px);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r4);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--sombra-2);
}
.ajudante__cabeca h2 {
  margin-top: 10px;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem); letter-spacing: -.025em;
}
.ajudante__lead { margin-top: 12px; font-size: 15px; color: var(--tinta-2); line-height: 1.55; max-width: 58ch; }

.ajudante__forma { margin-top: clamp(20px, 2.6vw, 26px); display: grid; gap: 18px; }

/* As duas perguntas cabem lado a lado JÁ A 360 px: são um número de dois
   dígitos e um selector de um. Empilhá-las custava um terço de ecrã antes
   de a pessoa chegar a um preço, e o preço é o que ela veio ver. */
.ajudante__campos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ajudante__campos .campo + .campo { margin-top: 0; }
.ajudante__campos .campo__ajuda { font-size: 12px; }

/* Em ecrã estreito os três ritmos empilham-se: a frase que explica o
   escolhido precisa da largura toda para se ler. Espremida numa coluna de
   86 px partia-se em oito linhas. */
.ajudante__perfis { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.ajudante__perfis legend { margin-bottom: 4px; padding: 0; grid-column: 1 / -1; }

.perfil { position: relative; display: block; cursor: pointer; }
.perfil input {
  position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.perfil__corpo {
  display: grid; gap: 3px; height: 100%; align-content: start;
  padding: 11px 12px; border-radius: var(--r2);
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  transition: border-color .3s var(--suave), background-color .3s var(--suave),
              box-shadow .35s var(--suave);
}
.perfil__nome { font-size: 14px; font-weight: 600; color: var(--tinta); }

/* A frase que explica cada ritmo só se abre no ritmo ESCOLHIDO.

   Não é para esconder informação: as três frases somadas ocupavam um terço
   de ecrã de telemóvel num painel que está antes dos preços, e a frase que
   interessa é a da opção que a pessoa acabou de escolher. As outras estão a
   um toque, e sem JavaScript nenhum — é o `:checked` a fazer o trabalho. */
.perfil__texto { display: none; font-size: 12.5px; color: var(--tinta-2); line-height: 1.4; }
.perfil input:checked + .perfil__corpo .perfil__texto { display: block; }
.perfil__conta { font-size: 12px; color: var(--tinta-3); letter-spacing: -.01em; }
.perfil input:hover + .perfil__corpo { border-color: var(--tinta); }
.perfil input:checked + .perfil__corpo {
  background: var(--amarelo-luz);
  border-color: var(--tinta);
  box-shadow: var(--sombra-1);
}
.perfil input:focus-visible + .perfil__corpo {
  outline: 2px solid var(--tinta); outline-offset: 3px;
}

.ajudante__accao { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ajudante__limpar { font-size: 14px; color: var(--tinta-2); text-underline-offset: 3px; }
.ajudante__limpar:hover { color: var(--tinta); }

/* -------- a resposta -------- */
.conselho {
  margin-top: clamp(20px, 2.6vw, 26px);
  padding: clamp(18px, 2.4vw, 24px);
  border-radius: var(--r3);
  background: var(--papel-2);
  border: 1px solid var(--linha);
}
.conselho__selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--rmax);
  background: var(--branco); border: 1px solid var(--linha-forte);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-2);
}
.conselho__selo svg { width: 15px; height: 15px; }
.conselho__titulo {
  margin-top: 14px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.15;
  letter-spacing: -.025em; color: var(--tinta);
}
.conselho__perfil { margin-top: 6px; font-size: 13.5px; color: var(--tinta-3); }
.conselho__texto { margin-top: 12px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.55; }
.conselho__texto--aviso {
  border-left: 3px solid var(--amarelo);
  padding-left: 14px; color: var(--tinta);
}
.conselho__conta { margin-top: 16px; }
.conselho__conta summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tinta);
  padding: 10px 0; min-height: 40px; display: flex; align-items: center;
  list-style: none;
}
.conselho__conta summary::-webkit-details-marker { display: none; }
.conselho__conta summary::before {
  content: "+"; display: inline-block; width: 1.2em;
  font-family: var(--mono); color: var(--tinta-3);
}
.conselho__conta[open] summary::before { content: "\2013"; }
.conselho__conta ul { display: grid; gap: 7px; margin-top: 6px; }
.conselho__conta li {
  position: relative; padding-left: 16px;
  font-size: 13.5px; color: var(--tinta-2); line-height: 1.5;
}
.conselho__conta li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: var(--rmax); background: var(--linha-forte);
}
.conselho__nota { margin-top: 12px; font-size: 13px; color: var(--tinta-3); line-height: 1.55; }

/* =============================================================
   A GRELHA DE PLANOS, dentro da coluna da compra
   ============================================================= */

.pacotes { margin-top: clamp(34px, 4.4vw, 56px); }
.pacotes__cabeca { margin-bottom: 4px; }
.pacotes__cabeca h2 {
  margin-top: 10px;
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em;
}
.pacotes__lead { margin-top: 12px; font-size: 15px; color: var(--tinta-2); line-height: 1.55; max-width: 58ch; }
.pacotes .filtro { margin-bottom: clamp(26px, 3.4vw, 36px); }
.linhas__abas--esquerda { justify-content: flex-start; }

/* -------- o cartão -------- */
.pacote__fita {
  position: absolute; top: -11px; left: clamp(20px, 2.6vw, 28px);
  background: var(--amarelo); color: var(--tinta);
  border-radius: var(--rmax); padding: 4px 12px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--brilho);
}
.pacote__fita--recomendado { background: var(--tinta); color: var(--tinta-inv); box-shadow: var(--sombra-2); }
.pacote__fita--degrau {
  background: var(--branco); color: var(--tinta-2);
  border: 1px solid var(--linha-forte); box-shadow: var(--sombra-1);
}
.pacote--recomendado { border-color: var(--tinta); box-shadow: var(--sombra-3); }

.pacote__voz {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 7px 13px; border-radius: var(--rmax);
  background: var(--tinta); color: var(--tinta-inv);
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
.pacote__voz svg { width: 15px; height: 15px; flex: 0 0 auto; }

.pacote__topo {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px 18px;
}
.pacote__medida { display: grid; gap: 6px; min-width: 0; }
.pacote__ilimitado {
  font-family: var(--sans); font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 600; letter-spacing: -.02em;
}
.pacote__preco { align-items: flex-end; text-align: right; border-top: 0; padding-top: 0; }
.pacote__unitario { justify-content: flex-end; }

.pacote__total {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 12px;
  padding: 11px 13px; border-radius: var(--r2);
  background: var(--papel-2);
  font-size: 13px; color: var(--tinta-2);
}
.pacote__total b { font-size: 15.5px; color: var(--tinta); letter-spacing: -.02em; }

/* O veredicto do ajudante. A cor NUNCA é a única marca: cada estado
   leva ícone e frase por extenso. */
.pacote__veredicto {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r2);
  border: 1px solid var(--linha-forte);
  font-size: 13px; line-height: 1.42; color: var(--tinta);
}
.pacote__veredicto svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.pacote__veredicto--bom { background: rgba(255, 212, 0, .16); border-color: rgba(18, 18, 18, .12); }
.pacote__veredicto--aviso { background: var(--papel-2); }
.pacote__veredicto--curto { background: var(--alerta-fundo); border-color: rgba(179, 38, 30, .32); color: var(--alerta); }
.pacote__veredicto--incerto { background: var(--branco); border-style: dashed; color: var(--tinta-2); }
.pacote__aguenta { font-size: 12.5px; color: var(--tinta-3); }

/* A cobertura, num details que funciona sem JavaScript. */
.cobertura {
  border: 1px solid var(--linha); border-radius: var(--r2);
  background: var(--papel);
}
.cobertura summary {
  cursor: pointer; list-style: none;
  display: grid; gap: 5px;
  padding: 11px 13px; font-size: 13px; color: var(--tinta-2);
}
.cobertura summary::-webkit-details-marker { display: none; }
.cobertura__conta { font-weight: 600; color: var(--tinta); }
.cobertura__inclui {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta);
}
.cobertura__inclui svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cobertura__accao { font-size: 12.5px; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
.cobertura[open] .cobertura__accao { display: none; }
.cobertura__lista {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 13px 13px;
  max-height: 190px; overflow-y: auto;
}
.cobertura__lista li {
  padding: 4px 9px; border-radius: var(--rmax);
  background: var(--branco); border: 1px solid var(--linha);
  font-size: 12px; color: var(--tinta-2);
}
.cobertura__lista .cobertura__actual {
  background: var(--amarelo); border-color: var(--tinta);
  color: var(--tinta); font-weight: 600;
}

/* O prazo de entrega, por pacote e nunca numa faixa no topo. */
.pacote__entrega {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.42; color: var(--tinta-2);
}
.pacote__entrega svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; opacity: .6; }
.pacote__entrega--manual {
  background: var(--papel-2); border-radius: var(--r2);
  padding: 10px 12px; color: var(--tinta);
}
.pacote__entrega--manual svg { opacity: 1; }

/* =============================================================
   ADAPTAÇÃO — mobile-first: daqui para baixo só se acrescenta
   ============================================================= */

@media (min-width: 560px) {
  .selector__campos { grid-template-columns: minmax(0, 1fr) auto; }
  .selector__campos > .campo:first-child { grid-column: 1 / -1; }
  .campo__par { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); }
  .procura { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .filtro { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ficha__linha { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: baseline; }
  .ficha__linha dt { align-items: center; }
  .provas__grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .par-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sistemas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A partir daqui há largura para os três ritmos ficarem lado a lado com
     as três frases abertas ao mesmo tempo: deixa de ser preciso guardá-las
     atrás do `:checked`, e quem escolhe compara as três de uma vez. */
  .ajudante__perfis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perfil__texto { display: block; }
}

@media (min-width: 820px) {
  .linha-produto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activacao__grelha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .empresas__grelha { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .diaspora__grelha { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroi__arte { display: block; }

  /* Duas colunas e duas linhas: o texto e o selector empilham-se à
     esquerda, a arte ocupa a direita inteira. Assim o selector fica
     ao lado da arte e não por baixo dela, que era o que o punha
     249 px abaixo da dobra numa janela de 720 px. */
  .heroi__grelha {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: start;
  }
  .heroi__texto { grid-column: 1; grid-row: 1; }
  .heroi__accao { grid-column: 1; grid-row: 2; }
  .heroi__arte  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* O ponto de corte da navegação subiu de 900 para 1180.
   A barra passou a ter SEIS entradas, duas delas longas — "Como funciona" e
   "Internacionais", que em inglês é "International eSIMs" e ainda cresce.
   A 900 px cabiam quatro; com seis, o cabeçalho transbordava a 1100 e as
   entradas partiam em duas linhas. A 1280 o inglês cabia com ZERO de folga,
   portanto o corte é a 1320: uma barra que só cabe ao pixel parte-se assim
   que alguém acrescentar uma entrada ou traduzir um nome para mais comprido. Entre esconder a navegação num menu e
   deixá-la partida, o menu é honesto e o partido parece avaria. */
@media (min-width: 1320px) {
  .navegacao { display: flex; margin-left: 20px; }
  .menu-botao { display: none; }
  .cabecalho__cta { display: inline-flex; }
  .cabecalho__interior { min-height: 76px; gap: 20px; }
  .checkout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .checkout__resumo { position: sticky; top: 96px; }
  .barra-accao { display: none !important; }
}

@media (min-width: 1000px) {
  .rodape__interior { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, .9fr); }
  .selector__campos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; }
  .selector__campos > .campo:first-child { grid-column: auto; }

  /* No herói o selector já não ocupa a página inteira: vive na coluna
     da esquerda, ao lado da arte, e aí três colunas espremiam as cinco
     fichas de duração contra o botão. Fica com a disposição de duas
     linhas — destino em cima, duração e botão em baixo.

     Isto é uma consulta ao TAMANHO DA JANELA a decidir sobre a largura
     de um contentor, que é sempre uma aproximação. Está escrito à mão
     porque a alternativa — uma consulta de contentor — muda o selector
     para toda a gente, e ele é o mesmo partial em duas páginas. */
  .heroi .selector__campos { grid-template-columns: minmax(0, 1fr) auto; }
  .heroi .selector__campos > .campo:first-child { grid-column: 1 / -1; }

  /* ------------------------------------------------------------
     AS DUAS COLUNAS DA PÁGINA DE DESTINO, E A TROCA DE SÍTIO.

     No HTML a compra vem primeiro — é o que tem de aparecer
     primeiro no telemóvel. Aqui, e só aqui, o destino passa para a
     coluna da esquerda com `grid-column`. A ordem de leitura de um
     leitor de ecrã continua a ser a do documento, que é a certa.

     A coluna da compra é a maior das duas: é ela que leva a grelha
     de planos a dois cartões por linha.
     ------------------------------------------------------------ */
  .destino__grelha { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .destino__lado { grid-column: 1; grid-row: 1; }
  .destino__compra { grid-column: 2; grid-row: 1; }
}

/* -------- menu de telemóvel -------- */
@media (max-width: 1319.98px) {
  .navegacao.esta-aberta {
    display: block;
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    background: var(--branco);
    border: 1px solid var(--linha); border-radius: var(--r3);
    padding: 8px 18px 14px;
    box-shadow: var(--sombra-4);
    animation: cair .34s var(--saida) both;
  }
  .navegacao.esta-aberta .navegacao__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacao.esta-aberta li + li { border-top: 1px solid var(--linha); }
  .navegacao.esta-aberta a { display: block; padding: 14px 0; font-size: 16px; color: var(--tinta); }
  .navegacao.esta-aberta a::after { display: none; }
}

/* =============================================================
   MOVIMENTO REDUZIDO
   =============================================================
   Tudo quieto, e NADA escondido: quem pede menos movimento não
   pode ficar sem conteúdo por causa disso. As revelações passam a
   estado final, as faixas param, e as transições ficam
   instantâneas em vez de desaparecerem.
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html.com-js .revelar { opacity: 1; transform: none; }
  .barra-accao.esta-visivel { transform: none; }
  .rota-traco { stroke-dashoffset: 0; }

  /* A faixa pára e a segunda cópia sai: passa a ser uma lista. */
  .tira__pista { animation: none; width: auto; }
  .tira__lista + .tira__lista { display: none; }
  .tira { overflow-x: auto; }
}

/* =============================================================
   IMPRESSÃO
   ============================================================= */

@media print {
  .cabecalho, .barra-accao, .wa-flutuante, .tira, .apoio, .selector, .filtro, .procura { display: none; }
  .ajudante__forma, .arte-destino__fundo { display: none; }
  body { background: #FFFFFF; }
  .bloco-escuro, .rodape { background: #FFFFFF; color: #121212; }
  .activacao__titulo, .activacao__assinatura { color: #121212; }
  .pacote, .checkout__caixa, .checkout__resumo, .ficha__linha--chave,
  .ajudante, .detalhes, .arte-destino { box-shadow: none; }
  /* O que estava dobrado num `details` imprime-se aberto: um papel
     não se carrega para abrir. */
  .cobertura__lista, .conselho__conta ul { display: block !important; }
  html.com-js .revelar { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Só sem JavaScript

   O botão de procurar nos dias de viagem existe para quem não tem
   JavaScript. Com JavaScript a escolha submete sozinha e a página desliza
   até aos pacotes, e um botão a mais era um gesto a mais.
   ------------------------------------------------------------------------- */
html.com-js .so-sem-js { display: none; }

/* NÃO acrescentar `scroll-margin-top` ao #pacotes.
   O <html> já tem `scroll-padding-top: 88px`, que é a folga do cabeçalho
   fixo para TODAS as âncoras. Os dois somam-se: com ambos, a secção parava
   184 px abaixo do topo e a página parecia não ter deslizado até ao fim. */

/* -------------------------------------------------------------------------
   O teste do *#06#

   Superfície amarela com tinta escura — o amarelo nunca é letra. Fica
   destacado do resto do verificador porque responde a quem a nossa lista de
   modelos não cobre, que é quem mais precisa de resposta.
   ------------------------------------------------------------------------- */
.verificador__eid {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  background: linear-gradient(180deg, rgba(255, 212, 0, .16), rgba(255, 212, 0, .06));
}

.verificador__eid h2 {
  margin: 0 0 8px;
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
}

.verificador__eid p { margin: 0 0 6px; }
.verificador__eid p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Os blocos de texto da página da compatibilidade

   Dois: o que fazer quando o telemóvel não aceita eSIM, e a armadilha do
   aparelho bloqueado a um operador. São texto e nada mais — sem ícone, sem
   cor de aviso — porque nenhum dos dois é um erro: são as duas respostas que
   faltavam à página.
   ------------------------------------------------------------------------- */
.nota-bloco {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  background: var(--branco);
}
.nota-bloco + .nota-bloco { margin-top: clamp(14px, 1.8vw, 20px); }
.nota-bloco h2 { margin: 0 0 10px; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); }
.nota-bloco p { margin: 0; color: var(--tinta-2); line-height: 1.65; }
.nota-bloco .nota-fina { margin-top: 12px; }
.nota-bloco .seccao__accao { margin-top: 18px; text-align: left; }

.verificador__codigo {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--tinta);
  border-radius: 6px;
  background: var(--amarelo);
  color: var(--tinta);
  letter-spacing: .04em;
}

/* -------------------------------------------------------------------------
   As regiões

   Cartões largos e poucos — são cinco, não duzentos. Contorno de um fio e
   realce amarelo no hover, como o resto do site: o amarelo é superfície,
   nunca letra.
   ------------------------------------------------------------------------- */
.regioes {
  list-style: none;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.regiao-cartao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 20px);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  background: var(--branco);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s cubic-bezier(.2, .6, .2, 1),
              box-shadow .18s cubic-bezier(.2, .6, .2, 1),
              transform .18s cubic-bezier(.2, .6, .2, 1);
}

.regiao-cartao:hover,
.regiao-cartao:focus-visible {
  border-color: var(--tinta);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .04),
              0 8px 24px rgba(18, 18, 18, .08),
              0 0 0 4px rgba(255, 212, 0, .28);
  transform: translateY(-1px);
}

.regiao-cartao__nome { font-weight: 600; }

.regiao-cartao__conta {
  margin-left: auto;
  font-size: .86rem;
  color: var(--tinta-media);
}

.regiao-cartao__seta { display: flex; }
.regiao-cartao__seta svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .regiao-cartao { transition: none; }
  .regiao-cartao:hover, .regiao-cartao:focus-visible { transform: none; }
}

/* ==========================================================================
   O CARTAO COMPACTO, E A GRELHA QUE CABE NO ECRA

   Pedido do dono, com capturas de uma loja de referencia ao lado: "algo
   compacto, que o cliente nao precisa ficar deslizando a pagina pra baixo
   pra ver as outras opcoes e comprar".

   Tres medidas, e nenhuma delas apaga informacao:

   1. A GRELHA passa a caber DOIS por linha em vez de um. O minimo desceu de
      260px para 190px — com o cartao a dizer tres coisas em vez de vinte e
      duas, 190px chegam, e num telemovel de 390px passam a ver-se dois
      pacotes lado a lado onde antes se via um.

   2. O CARTAO aperta: menos respiro por dentro e entre linhas. O que fazia o
      cartao alto nao era o texto, era o espaco a volta de catorze linhas que
      agora sao tres.

   3. O DOBRO — o `details` — vive de um resumo discreto que nao compete com o
      preco. Aberto, o corpo herda o tamanho de letra pequeno que as linhas
      tinham antes: quem abre quer ler, nao quer destaque.
   ========================================================================== */

.pacotes__grelha {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

.pacote--compacto {
  gap: 9px;
  padding: clamp(14px, 1.8vw, 18px);
  border-radius: var(--r2);
}

.pacote--compacto .pacote__topo { align-items: flex-start; gap: 10px; }
.pacote--compacto .pacote__volume { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.1; }
.pacote--compacto .pacote__valor { font-size: clamp(1.05rem, 2vw, 1.25rem); }
.pacote--compacto .pacote__duracao { font-size: .84rem; opacity: .7; margin-top: 2px; }

/* O rotulo "Preco" deixa de se ler: numa grelha de precos, escrever "preco"
   em cima de cada numero e ruido. Fica para o leitor de ecra, que nao tem a
   grelha toda a vista de uma vez. */
.pacote--compacto .pacote__rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pacote--compacto .pacote__voz,
.pacote--compacto .pacote__veredicto,
.pacote--compacto .pacote__entrega { font-size: .8rem; gap: 6px; margin: 0; }

.pacote--compacto .botao--largo { padding: 9px 14px; font-size: .88rem; margin-top: auto; }

.pacote__mais { font-size: .82rem; }

.pacote__mais > summary {
  cursor: pointer; list-style: none;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linha);
  padding-top: 9px;
  display: flex; align-items: center; gap: 6px;
}

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

/* A seta e desenhada em CSS e roda ao abrir. Um triangulo unicode mudava de
   forma conforme o tipo de letra instalado. */
.pacote__mais > summary::after {
  content: ''; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s var(--suave);
}

.pacote__mais[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pacote__mais > summary:hover { color: var(--tinta); }

.pacote__mais-corpo { display: grid; gap: 9px; padding-top: 10px; }
.pacote--compacto .pacote__linhas { gap: 7px; font-size: .82rem; }
.pacote--compacto .cobertura__lista { font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .pacote__mais > summary::after { transition: none; }
}

/* ==========================================================================
   TRAZER OS PRECOS PARA O PRIMEIRO ECRA

   Medido antes de cortar: na pagina de Portugal o primeiro cartao comecava
   aos 1234px, com a janela a 860. O cliente tinha de rolar meio ecra para
   ver um preco na pagina que existe para vender.

   O que estava a ocupar o espaco, medido elemento a elemento:

     garantias        148px   quatro linhas empilhadas
     cabeca dos pacotes 148px  sobrancelha + titulo + lead
     filtro            96px   rotulo por cima das fichas
     nota do painel     46px
     migalhas           65px

   Nada disto se APAGA — apaga-se a repeticao e o espaco morto:

   1. As garantias passam de coluna a LINHA que quebra. Sao quatro frases
      curtas; empilhadas gastavam 148px para dizer o que cabe em 45.

   2. A sobrancelha "PACOTES" sai. Estava por cima de um titulo que diz
      "Escolha o pacote" — dizia a mesma coisa duas vezes, e uma delas em
      maiusculas pequenas que ninguem le.

   3. O lead da seccao encolhe. O h1 ja disse a que pagina isto e.

   4. O rotulo do filtro passa para o lado das fichas em vez de por cima.

   Nenhuma frase desapareceu para um leitor de ecra: o que saiu foi
   duplicacao visivel, e o resto so mudou de arrumacao.
   ========================================================================== */

.destino__compra .garantias {
  display: flex; flex-wrap: wrap;
  gap: 6px 16px;
  margin: 4px 0 0;
}

.destino__compra .garantia-facto { font-size: .82rem; gap: 6px; }
.destino__compra .garantia-facto svg { width: 15px; height: 15px; }

.destino__compra .pacotes__cabeca { margin-bottom: 10px; }
.destino__compra .pacotes__cabeca .sobrancelha { display: none; }
.destino__compra .pacotes__cabeca h2 { margin-bottom: 4px; }
.destino__compra .pacotes__lead { font-size: .88rem; margin: 0; }

.destino__compra .filtro {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.destino__compra .filtro .campo__rotulo { margin: 0; font-size: .78rem; }
.destino__compra .painel__nota { font-size: .82rem; margin: 6px 0 10px; }
.destino__compra .painel__titulo { font-size: 1rem; margin-bottom: 2px; }

.cabeca-pagina--curta { padding-block: 14px; }

/* O espaco ENTRE as coisas pesava 131px acima da grelha — mais do que
   varios dos blocos que separava. Uma pagina de venda nao precisa de
   respirar tanto antes de dizer o preco. */
.destino__compra > .sobrancelha { margin-bottom: 6px; }
.destino__compra .destino__nome { margin: 0 0 8px; }
.destino__compra .chamada { font-size: .95rem; margin: 0 0 10px; }
.destino__compra .destino__desde { margin: 0 0 10px; font-size: .9rem; }
.destino__compra .destino__verificar { margin: 12px 0 0; }
.destino__compra .pacotes { margin-top: 18px; }

/* -------------------------------------------------------------
   A LINHA DO TRUSTPILOT

   Só existe na página quando há perfil reclamado — ver
   `site/partials/trustpilot.blade.php`. Aqui reserva-se a altura
   que a caixa deles vai ocupar.

   A altura reservada não é detalhe: o widget carrega de um
   servidor de fora e, numa ligação fraca em Luanda, aparecer de
   repente empurrava a página inteira para baixo. Quem estivesse a
   carregar em "Ver pacotes" carregava noutra coisa qualquer.
   ------------------------------------------------------------- */
.trustpilot {
  display: flex;
  justify-content: center;
  /* 24px da caixa + o ar à volta. Casa com o `data-style-height`
     do bloco: se um mudar, muda-se o outro. */
  min-height: 24px;
  padding: 18px 16px 6px;
}

.trustpilot .trustpilot-widget { width: 100%; max-width: 60rem; }

/* O que se vê se o script deles nunca chegar: uma ligação para o
   perfil, discreta. Nunca um número — um número parado no ecrã sem
   nada por trás é a definição de classificação inventada. */
.trustpilot a {
  font-size: .84rem;
  color: var(--tinta-suave, #6E6C66);
  text-decoration: underline;
}