/* ==========================================================================
   AFROCHIP — PASSO 3 DE 4: ESCOLHER O PACOTE

   Folha própria enquanto esta peça se refaz em paralelo. Carrega DEPOIS da
   `estilo.css` no molde: mesma especificidade, e a última ganha. Funde-se na
   principal quando a peça assentar.

   --------------------------------------------------------------------------
   O PROBLEMA, MEDIDO E NÃO ADIVINHADO. Janela de 1200x900, /destinos/pt.
   Medido no browser, antes e depois, e não estimado.

     ANTES                                    DEPOIS
     cabeçalho do site          0             cabeçalho do site          0
     h1                        94             barra de passos           81
     tira de garantias        148             h1                       187
     convite ao conselho      255             tira de controlos        237
     "Escolha o pacote"       318             nota do separador        290
     separadores              350             PRIMEIRO CARTÃO          319
     nota do separador        408             GRELHA ACABA             879
     PRIMEIRO CARTÃO          439             convite ao passo 2       925
     GRELHA ACABA            1301             garantias               1039
     área de compra acaba    1839             ficha do eSIM           1152

     altura da grelha         862             altura da grelha         560
     altura do documento     3688             altura do documento     3342

   Ver as seis opções pedia 401 px de rolo e chegar ao botão de compra pedia
   quase mil. Agora a grelha inteira cabe nos 900 px do ecrã, com 21 px de
   folga, e o botão de comprar está dentro de cada cartão.

   --------------------------------------------------------------------------
   A CAUSA NÃO ERA O NÚMERO DE CARTÕES: ERA A LARGURA DE CADA UM.

   A grelha vivia numa coluna de 619 px, com a coluna do destino de 413 px ao
   lado. Três cartões por linha nessa coluna dão cartões de 196 px, e a essa
   largura o texto torna-se uma torre:

                             a 196 px      a 347 px
     aviso de entrega manual   147 px        75 px
     nota do pacote com voz     94 px        56 px
     volume + duração + preço   97 px        54 px

   O mesmo número de palavras. Resultado: a linha de cima da grelha media
   270 px e a de baixo 576 px, porque uma linha de grelha tem a altura do
   cartão mais alto dela.

   Dar a largura toda à grelha baixou-a de 862 px para 559 px sem se apagar
   uma palavra. É a única mudança que fez trabalho a sério; o resto foram
   dezenas de pixels.

   --------------------------------------------------------------------------
   O QUE SE FEZ, POR ORDEM DE QUANTO VALEU.

   1. A COLUNA DO DESTINO DESCEU PARA DEBAIXO DA GRELHA (-303 px de altura
      de grelha). Continua escrita depois da compra no documento — o teste
      que guarda essa ordem continua a passar — mas deixou de estar ao lado
      a roubar 413 px de largura ao que se vende. As garantias, a arte e a
      ficha do eSIM são conteúdo de quem hesita, e hesita-se depois de ver
      os preços.

   2. OS SEPARADORES E O FILTRO DE DURAÇÃO PASSARAM À MESMA TIRA (-120 px).
      São a mesma operação — apertar o que se vê — e estavam a 300 px um do
      outro por acidente de história.

   3. AS MIGALHAS SAÍRAM (-0 px de altura, +1 decisão mais clara). A barra
      dos quatro passos diz onde se está, quanto falta e liga para trás.
      Duas tiras de navegação empilhadas eram o que fazia deslizar.

   4. O "ESCOLHA O PACOTE" PASSOU A SÓ-LEITORES (-34 px). Terceira vez que a
      mesma frase aparecia no ecrã, depois do <h1> e da barra de passos.

   5. A TIRA DE GARANTIAS PERDEU A CAIXA AMARELA. Não é altura: é a única
      superfície amarela forte da página ser a faixa dos pacotes com
      chamadas, que é o produto que a concorrência não vende e que o dono
      procurou três vezes sem dar por ele. Duas superfícies amarelas e
      nenhuma se vê.

   6. A BARRA DE PASSOS CUSTA 105 px que antes não existiam, e é o preço de
      a pessoa saber quanto falta. Foi pago pelo resto.
   ========================================================================== */


/* --------------------------------------------------------------------------
   A SECÇÃO

   O respiro do topo é curto: entre o cabeçalho do site e a barra de passos
   não vai nada que valha 42 px.
   -------------------------------------------------------------------------- */

.seccao--destino {
  padding-top: clamp(8px, 1vw, 14px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* A mancha amarela está fora do fluxo, portanto não custa altura nenhuma —
   é só a marca a entrar na página. */
.seccao--destino .cabeca-pagina__mancha {
  position: absolute; z-index: -1; pointer-events: none;
  top: -22%; left: -14%; width: 62%; height: min(460px, 54vh);
}


/* --------------------------------------------------------------------------
   UMA COLUNA, E A COMPRA EM CIMA

   A `estilo.css` põe esta página a duas colunas a partir dos 1000 px, com a
   compra à direita e o destino à esquerda, por `grid-column`. Foi essa
   arrumação que meteu os preços no primeiro ecrã quando a página ainda era a
   loja inteira, e o teste que guarda a ordem do documento lê aquelas duas
   regras no ficheiro.

   Num passo que só serve para escolher, a conta virou-se: os 413 px da
   coluna do lado valem mais dentro dos cartões do que ao lado deles. Aqui
   as duas colunas viram duas FILAS — a compra em cima, o destino em baixo —
   e a ordem do documento não muda.

   O `grid-column` de lá TEM DE SER DESFEITO ao mesmo tempo que o
   `grid-template-columns`, e no mesmo ponto de quebra. Com uma coluna só e
   um `grid-column: 2` esquecido, o browser inventa uma segunda coluna e
   aperta a primeira até zero: a coluna do destino desapareceu do ecrã
   inteira, com 0 px de largura, e a página continuou a servir HTML certo.
   Já aconteceu aqui, medido no browser, e é por isso que estas três linhas
   andam sempre juntas.
   -------------------------------------------------------------------------- */

.destino__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 44px);
  align-items: start;
}

/* --------------------------------------------------------------------------
   DUAS COLUNAS OUTRA VEZ: A FICHA E A ARTE À ESQUERDA, OS PACOTES À DIREITA.

   Pedido do dono, com a captura ao lado: "essas duas coisas da page destino,
   manda pra esquerda pra ficar ao lado dos pacotes".

   Estas duas linhas tinham posto tudo numa coluna só, com a arte e a ficha
   DEBAIXO da grelha. A razão era boa e continua a ser verdade: numa coluna
   estreita os cartões ficavam com 196 px, e a essa largura o aviso de
   entrega manual ocupava 147 px de altura contra 75 num cartão largo.

   Mas o remédio custava mais do que a doença. A ficha do eSIM — que o
   cartão do cliente fica no telemóvel, que não há roaming por cima, que a
   validade só arranca no primeiro uso — é o que responde à dúvida de quem
   nunca instalou um eSIM. Debaixo da grelha, ninguém a lê.

   A CONTA DA LARGURA, que é o que fazia isto falhar antes: a coluna da
   esquerda leva no máximo 340 px, e só a partir de 1180 px é que há duas
   colunas. Nos 1180 sobram 800 para a grelha, que dá cartões de 255 px —
   contra os 196 que criaram o problema. Abaixo disso continua tudo numa
   coluna, com a compra primeiro.

   `minmax(260px, 340px)` e não `.8fr`: uma fracção aperta-se até desaparecer
   quando o conteúdo da outra coluna cresce, e já aconteceu aqui — a coluna
   do destino ficou com 0 px de largura e a página continuou a servir HTML
   certo. Um mínimo em pixéis não se deixa esmagar.
   -------------------------------------------------------------------------- */

@media (min-width: 1180px) {
  .destino__grelha { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .destino__grelha > .destino__lado { grid-column: 1; grid-row: 1; }
  .destino__grelha > .destino__compra { grid-column: 2; grid-row: 1; }
}


/* --------------------------------------------------------------------------
   O TOPO: o nome do destino e o preço mais baixo na mesma linha
   -------------------------------------------------------------------------- */

.destino__topo {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 4px 24px;
  margin-bottom: 12px;
}

.destino__topo .destino__nome {
  margin: 0;
  flex: 1 1 14ch; max-width: none;
  gap: 8px 12px;
  font-size: clamp(1.4rem, 2.3vw, 1.75rem);
  line-height: 1.1; letter-spacing: -.03em;
}

.destino__topo .destino__bandeira {
  width: 34px; height: 23px;
}

.destino__topo .destino__desde {
  margin: 0; flex: 0 0 auto;
  gap: 4px 8px; font-size: 12.5px;
}

.destino__topo .destino__desde b {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}


/* --------------------------------------------------------------------------
   A TIRA DE CONTROLOS: separadores à esquerda, duração à direita

   Tudo o que aperta a grelha numa linha só, logo por cima dela. Em ecrã
   estreito parte em duas linhas, que é o que uma tira deve fazer.

   Sem JavaScript os separadores desaparecem (regra da `estilo.css`, porque
   os três painéis passam a mostrar-se todos) e sobra o filtro sozinho. A
   tira aguenta isso sem se desmanchar: é `flex` com `wrap`, não uma grelha
   de duas colunas que ficaria com um buraco.
   -------------------------------------------------------------------------- */

.pacotes__controlos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 10px;
}

.destino__compra .linhas__abas {
  margin: 0; flex: 0 1 auto; min-width: 0;
}

.destino__compra .segmentos { padding: 3px; box-shadow: var(--sombra-1); }

.destino__compra .segmentos__botao {
  padding: 7px 14px; font-size: 13.5px;
}

.destino__compra .segmentos__barra { top: 3px; bottom: 3px; }

/* O filtro deixa de ser uma caixa com moldura e sombra e passa a ser o que
   é: um rótulo e cinco fichas em linha. A moldura fazia sentido quando ele
   vivia sozinho numa coluna; dentro de uma tira, uma caixa dentro de outra
   caixa é ruído. */
.destino__compra .filtro--tira {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
}

.destino__compra .filtro--tira .campo__rotulo {
  display: inline; margin: 0;
  font-size: 11.5px; letter-spacing: .06em;
}

.destino__compra .filtro--tira .fichas { gap: 5px; }

.destino__compra .filtro--tira .ficha span {
  font-size: 12.5px; padding: 5px 11px;
}


/* --------------------------------------------------------------------------
   A GRELHA

   TRÊS COLUNAS FIXAS, e o número não é estético. A `estilo.css` deixa as
   colunas ao critério do espaço (`auto-fit, minmax(190px, 1fr)`), o que
   nesta largura daria cinco cartões estreitos por linha — e cartão estreito
   é cartão alto, pelas contas do cabeçalho desta folha. Três cartões largos
   em duas linhas são mais baixos do que cinco estreitos em duas linhas.
   -------------------------------------------------------------------------- */

.destino__compra .pacotes { margin-top: 0; }

.destino__compra .painel__nota {
  margin: 0 0 10px;
  font-size: 13px; line-height: 1.45; max-width: 78ch;
}

/* CADA CARTÃO TEM A ALTURA DO QUE TEM DENTRO, e não a da linha.

   Uma linha de grelha tem a altura do cartão mais alto dela, e o botão de
   comprar do cartão está colado ao fundo (`margin-top: auto`, na folha do
   cartão) para que os botões de uma linha se alinhem. Com cartões estreitos
   isso não se notava; com cartões de 347 px numa linha onde um deles leva o
   aviso de entrega manual e a nota da voz, o cartão de "50 GB · 3 dias"
   ficava com 180 px de branco entre o texto e o botão — parecia um cartão
   avariado, ou um pacote a que faltava informação.

   Ficam alinhados em CIMA e cada um acaba onde acaba. As bases ficam
   desencontradas, e é o preço certo a pagar: um cartão compacto lê-se como
   uma coisa acabada, um cartão vazio lê-se como um erro. */
/* OS CARTOES ESTICAM ATE AO FIM DA LINHA.

   Defeito do dono: "porque esse espaco? entre os planos 500 MB e 10GB".

   Era o `align-items: start` desta regra. Cada cartao ficava com a altura
   do seu proprio conteudo: um internacional leva a conta dos paises e a
   gaveta da lista e mede 329px; um simples mede 183. A linha da grelha
   fica com a altura do mais alto, e por baixo do mais baixo sobravam 146
   px de buraco.

   `stretch` faz cada cartao ocupar a linha inteira. E ganha-se outra
   coisa que nao era o pedido: o botao de comprar ja tinha
   `margin-top: auto`, por isso passa a assentar no fundo de TODOS os
   cartoes, alinhado. Uma fila de botoes a alturas diferentes le-se como
   desarrumacao mesmo quando ninguem sabe dizer porque. */
.destino__compra .pacotes__grelha {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .destino__compra .pacotes__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .destino__compra .pacotes__grelha { grid-template-columns: minmax(0, 1fr); }
}

/* O embrulho de cada cartão. Existe para uma coisa só: marcar o que o
   cliente já tinha escolhido quando volta do passo 4 pelo botão do browser.
   É `flex` para o cartão encher a altura da linha — sem isso os cartões
   ficavam de alturas diferentes dentro da mesma linha, com o botão de
   comprar a dançar. */
.pacotes__item { display: flex; min-width: 0; }
.pacotes__item > .pacote { width: 100%; }

.pacotes__item--escolhido {
  border-radius: calc(var(--r2) + 3px);
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* Sem JavaScript os painéis mostram-se todos, cada um com o seu título. Esse
   título é grande na folha principal — aqui fica à escala do resto. */
html:not(.com-js) .destino__compra .painel__titulo {
  font-size: 1.15rem; margin-bottom: 6px;
}

html:not(.com-js) .destino__compra .painel + .painel { margin-top: clamp(24px, 3vw, 36px); }


/* --------------------------------------------------------------------------
   O CONVITE AO PASSO 2, DEPOIS DAS OPÇÕES

   Discreto de propósito. Quem chegou aqui por uma pesquisa vê preços sem
   responder a nada — essa é a regra do fluxo — e esta linha é uma oferta,
   não um pedágio.
   -------------------------------------------------------------------------- */

.pacotes__convite {
  margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--tinta-2);
}

.pacotes__convite a { color: inherit; text-underline-offset: 3px; }
.pacotes__convite a:hover { color: var(--tinta); }

.destino__compra .pacotes__nota { margin-top: 10px; }


/* --------------------------------------------------------------------------
   A FILA DE BAIXO: garantias, arte e ficha do eSIM

   Em ecrã largo a fila reparte-se: as garantias a toda a largura logo
   debaixo da grelha, e por baixo delas a arte à esquerda e a ficha à
   direita. A ficha é a que tem texto a sério, e por isso leva a coluna
   maior.
   -------------------------------------------------------------------------- */

.destino__lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
  min-width: 0;
}

@media (min-width: 900px) {
  .destino__lado {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: start;
  }
  .destino__lado > .destino__selos { grid-column: 1 / -1; }
}

.destino__lado > .detalhes,
.destino__lado > .destino__prova { margin: 0; }


/* -------- as garantias, sem caixa --------
   Quatro factos que se podem verificar, em linha. A caixa amarela saiu: o
   único amarelo forte desta página é a faixa dos pacotes com chamadas, e
   duas superfícies amarelas apagam-se uma à outra. */

.destino__selos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: none;
}

.destino__selos .garantias {
  display: flex; flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0; padding: 0;
  flex: 1 1 30ch; min-width: 0;
  background: none; border: 0; border-radius: 0;
}

.destino__selos .garantia-facto {
  font-size: 12.5px; line-height: 1.4; gap: 6px;
}

.destino__selos .garantia-facto svg { width: 15px; height: 15px; margin-top: 1px; }

.destino__selos .destino__verificar {
  margin: 0; flex: 0 0 auto;
  background: var(--branco);
  padding: 8px 14px; font-size: 13px;
}

.destino__selos .destino__verificar svg { width: 15px; height: 15px; }


/* -------- a arte e a etiqueta da linha -------- */

.destino__prova { display: grid; gap: 12px; align-content: start; }

.arte-destino { min-height: clamp(140px, 16vw, 190px); }

.destino__linha { margin: 0; }


/* -------- a ficha do eSIM: duas linhas à vista, o resto numa gaveta --------
   A razão está escrita em `partials/detalhes`. Aqui só se pinta. */

.destino__lado .detalhes { padding: clamp(16px, 2vw, 22px); }
.destino__lado .detalhes__lista { margin-top: 14px; }
.destino__lado .detalhes__linha { padding: 11px 0; }

.detalhes__lista--chave { margin-top: 14px; }

.detalhes__resto { margin-top: 4px; }

.detalhes__resto > summary {
  cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600;
  padding: 11px 0 0;
  border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 7px;
}

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

.detalhes__resto > summary::after {
  content: ''; width: 7px; height: 7px;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

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

.detalhes__resto .detalhes__lista { margin-top: 6px; }

/* De onde vem o numero. Uma linha, que abre para a conta inteira.
   O selo "Estimativa nossa" nunca fica escondido: e o summary que o leva,
   nao o corpo — fechado ou aberto, le-se sempre. */
.conselho-origem {
  border: 1px solid var(--linha);
  border-radius: var(--r1);
  padding: 9px 12px;
  margin: 0 0 12px;
  font-size: .86rem;
}
.conselho-origem > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.conselho-origem > summary::-webkit-details-marker { display: none; }
.conselho-origem__selo { font-size: .76rem; color: var(--tinta-suave); }
.conselho-origem__conta {
  margin: 8px 0 0; padding-left: 18px;
  font-size: .82rem; color: var(--tinta-media);
  display: grid; gap: 3px;
}
.conselho-origem__titulo { margin: 10px 0 4px; font-weight: 600; font-size: .84rem; }
.conselho-origem__nota { margin: 8px 0 0; font-size: .8rem; color: var(--tinta-suave); }

/* DOIS CARTOES POR LINHA NESTA COLUNA, E NAO TRES.

   Com a ficha de volta a esquerda, a coluna da compra ficou com 684 px e a
   grelha punha la tres cartoes de 219. A essa largura o aviso de entrega
   manual quebra em tres linhas e o cartao cresce em altura para ganhar 30 px
   de largura — foi exactamente este efeito que levou alguem a descer a ficha
   para debaixo da grelha.

   O minimo sobe de 190 para 250: a 684 px cabem dois de 335, que e a largura
   da loja de referencia. Menos cartoes por linha, cada um legivel de
   relance, e a coluna da esquerda mantem-se.

   Fica so DENTRO da coluna da compra: a mesma grelha noutra pagina, sem esta
   coluna ao lado, continua a decidir sozinha quantos cabem. */
@media (min-width: 1180px) {
  .destino__compra .pacotes__grelha {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* ==========================================================================
   A COLUNA DO LADO VOLTA A SER UMA COLUNA.

   Defeito do dono: "ficou tudo bugado, a ficha nem aparece bem".

   Medido: coluna de 340px, e dentro dela a arte com 122 e a ficha com 191.
   A regra dos 900px punha `.destino__lado` em DUAS colunas — e estava certa
   enquanto este bloco vivia por BAIXO da grelha, a ocupar a largura toda:
   arte e ficha lado a lado aproveitavam o espaco.

   Assim que voltou a ser a coluna da esquerda, essas duas colunas passaram a
   dividir 340px entre si. Uma ficha tecnica com 191px de largura quebra cada
   linha em tres, e a arte com 122px deixa de se ler.

   A regra dos 900 continua a servir o caso em que ela e uma faixa larga
   (entre 900 e 1180). A partir dos 1180, que e quando ela vira coluna, volta
   a ser uma coluna so.
   ========================================================================== */

@media (min-width: 1180px) {
  .destino__lado {
    grid-template-columns: minmax(0, 1fr);
  }
  .destino__lado > .destino__selos { grid-column: 1; }
}

/* ==========================================================================
   A FAIXA DOS 1000 AOS 1180, QUE FICOU SEM DONO.

   Defeito do dono: "ficou tudo bugado". Medido a 1000px de largura, as tres
   caixas da coluna do lado tinham 22px, 0px e 42px.

   A `estilo.css` poe esta pagina a duas colunas a partir dos 1000px, com
   `.destino__lado { grid-column: 1 }` e `.destino__compra { grid-column: 2 }`.
   Eu desfiz isso a partir dos 1180 — e esqueci a faixa entre os dois.

   Nessa faixa a grelha ficava com UMA coluna declarada aqui e dois
   `grid-column` da folha de cima a apontar para uma segunda que ja nao
   existia. O browser inventa a coluna que falta e aperta a primeira ate
   perto de zero: e exactamente o efeito que o comentario la em cima avisa,
   e ainda assim voltou a acontecer — porque uma regra escrita num ponto de
   quebra so protege desse ponto para cima.

   A licao: `grid-template-columns` e os `grid-column` que dependem dele TEM
   de ser desfeitos NO MESMO ponto onde foram postos, e nao mais acima.
   ========================================================================== */

@media (min-width: 1000px) and (max-width: 1179.98px) {
  .destino__grelha { grid-template-columns: minmax(0, 1fr); }
  .destino__grelha > .destino__compra { grid-column: 1; grid-row: 1; }
  .destino__grelha > .destino__lado { grid-column: 1; grid-row: 2; }
}

/* ==========================================================================
   O DESTINO QUE SE COMPRA A FALAR CONNOSCO

   Pedido do dono: "mas nao remove o irao, so coloca os pacotes dele vindo
   'COMPRA MANUAL CONTACTE XXXX'". Este bloco ocupa o lugar exacto da grelha
   de precos, dentro de `.destino__compra`, nos destinos que estao em
   `SiteController::DESTINOS_POR_ENCOMENDA`.

   --------------------------------------------------------------------------
   NAO SE DESENHA COMO UM ERRO, E ISSO E A DECISAO INTEIRA.

   A tentacao era a caixa vermelha do `--alerta`: falta uma coisa, avisa-se.
   Mas nao falta nada — o destino existe, a compra existe, e o que muda e a
   forma de a fazer. Uma faixa de aviso por cima disso dizia ao cliente
   "correu mal", e o que correu foi normal.

   Por isso e um painel de papel como qualquer outro bloco de conteudo da
   loja, com a mesma sombra e o mesmo raio dos cartoes. O unico amarelo e a
   marca redonda do canto — superficie, nunca letra, que e a regra da casa.

   --------------------------------------------------------------------------
   E NAO SE DESENHA COMO UM CARTAO DE PRECO.

   Nada aqui tem o feitio de um pacote: sem grelha, sem colunas, sem
   pastilha de preco, sem numero em `mono` a nao ser o proprio numero de
   telefone quando ele existir. Um bloco com ar de cartao numa pagina que
   acaba de dizer que nao ha preco convidava a procurar o preco que nao esta
   la.
   ========================================================================== */

.manual {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r4);
  box-shadow: var(--sombra-1);
  padding: clamp(22px, 4vw, 38px);
}

/* A marca e o titulo na mesma linha: o icone ancora o bloco sem gastar uma
   linha de altura so para si. */
.manual__cabeca {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.manual__marca {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--rmax);
  /* Amarelo em superficie, tinta escura por cima. Nunca amarelo em letra. */
  background: var(--amarelo);
  color: var(--tinta);
}

.manual__marca svg {
  width: 24px;
  height: 24px;
  display: block;
}

.manual__titulo {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  line-height: 1.15;
}

.manual__lead {
  margin: 20px 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tinta);
}

/* A explicacao de porque nao ha preco. Fica em tinta secundaria: e
   importante, mas nao e a frase que abre o bloco. */
.manual__preco {
  margin: 12px 0 0;
  line-height: 1.6;
  color: var(--tinta-2);
}

.manual__como {
  margin: 26px 0 0;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* Os numeros dos passos vem da lista e nao do texto: escritos no texto
   apareceriam na varredura que procura contagens a vista, e uma lista
   ordenada desenha-os melhor do que uma frase. */
.manual__passos {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo-manual;
}

.manual__passos li {
  counter-increment: passo-manual;
  position: relative;
  padding: 0 0 0 40px;
  margin: 0 0 12px;
  line-height: 1.55;
  color: var(--tinta);
}

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

.manual__passos li::before {
  content: counter(passo-manual);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rmax);
  background: var(--papel-2);
  border: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--tinta-2);
}

.manual__accoes {
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* A frase do "ainda nao ha contacto publicado" toma a linha toda: e uma
   explicacao e nao um rotulo de botao, e ao lado do botao lia-se como se
   fosse legenda dele. */
.manual__sem-contacto,
.manual__numero {
  flex: 1 0 100%;
  margin: 0;
  line-height: 1.55;
  color: var(--tinta-2);
}

.manual__numero { font-size: .95rem; }

/* A ressalva. Separada por um fio porque muda o estatuto do que esta em
   cima: ate aqui e o que fazemos, daqui para baixo e o que nao prometemos. */
.manual__nota {
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--linha);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--tinta-3);
}

.manual .seccao__accao {
  margin: 22px 0 0;
}

/* No telemovel a marca sobe para cima do titulo: a 360 px, o icone ao lado
   deixava ao titulo largura para duas palavras por linha. */
@media (max-width: 460px) {
  .manual__cabeca {
    display: block;
  }
  .manual__marca {
    margin: 0 0 14px;
  }
  .manual__accoes .botao {
    width: 100%;
    justify-content: center;
  }
}