/* comprar — folha propria enquanto esta peca se refaz em paralelo.
   Funde-se na estilo.css quando assentar.

   =========================================================================
   SEIS CARTOES TINHAM SEIS BOTOES DE COMPRAR. AGORA HA UM.

   O dono disse duas coisas que sao a mesma: "quero tudo no mesmo lugar" e
   "vender facil pra o cliente". A grelha passou a ser uma lista de ESCOLHAS
   e a compra passou a ser UMA — um contador, um total, um botao, no fim.

   Isto muda o trabalho de cada peca:

     O CARTAO deixa de pedir dinheiro. A barra em baixo diz "Escolher" e
     nada mais acontece: nao ha decisao de compra dentro da grelha, so
     decisao de PRODUTO. Quem escolhe nao esta a comprometer-se, e por isso
     escolhe mais depressa.

     A AREA DE COMPRA e a unica coisa da pagina que pede dinheiro, e portanto
     e a unica que tem direito ao botao cheio. Se a grelha tambem tivesse
     botoes cheios, seriam sete botoes a competir e nenhum a ganhar.

   O ESTADO MARCADO E CSS PURO, e nao e uma escolha de estilo. O rádio vem
   ANTES do cartao no HTML de proposito: `:checked ~ .pacote` pinta o cartao
   escolhido sem `:has()` e sem uma linha de script. Com o JavaScript
   desligado o cliente TEM de ver qual e o cartao de que fala o total la em
   baixo — um total orfao e um total em que ninguem confia.

   COR: o marcado e TINTA, nao amarelo. O amarelo ja e a faixa do pacote de
   voz no topo do cartao; se fosse tambem o estado marcado, dois amarelos no
   mesmo cartao diziam duas coisas diferentes. O amarelo fica para o rato —
   passar por cima da barra acende-a, e e so isso.
   ========================================================================= */

/* -------------------------------------------------------------------------
   O EMBRULHO DA ESCOLHA
   ------------------------------------------------------------------------- */

/* Passa a ser ele o item da grelha, e nao o cartao. Coluna, para que o cartao
   estique e a barra assente sempre no fundo — cartoes de alturas diferentes
   na mesma linha tinham as barras a alturas diferentes, e uma fila de botoes
   desalinhados le-se como uma fila desarrumada. */
.escolha {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r2);
  /* A sombra sai do cartao e vem para aqui: o cartao e a barra sao um objecto
     so, e um objecto so tem uma sombra. */
  box-shadow: var(--sombra-1);
  transition: box-shadow .35s var(--suave, ease), transform .35s var(--suave, ease);
}

/* O RADIO EXISTE, ESTA NO SITIO, E NAO SE VE.

   `opacity: 0` e nao `display: none` nem `visibility: hidden`: os dois
   ultimos tiram-no da ordem do teclado, e um grupo de radios que nao se
   percorre com as setas nao e um grupo de radios. Fica onde a barra esta,
   para que o browser nao role a pagina para um canto estranho ao dar-lhe
   foco. */
.escolha__radio {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* O cartao estica e perde o fundo: quem o fecha em baixo e a barra. */
.escolha .pacote {
  flex: 1 1 auto;
  margin: 0;
  box-shadow: none;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* O salto de 5px do cartao passa para o embrulho. Sem isto o cartao subia e
   deixava a barra dele para tras — o objecto partia-se ao passar o rato.
   Especificidade a mais de proposito: a regra `.pacote:hover` da estilo.css
   tem de perder aqui dentro. */
.escolha .pacote:hover {
  transform: none;
  box-shadow: none;
}

.escolha:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-3);
}

.escolha:hover .pacote,
.escolha:hover .escolha__accao {
  border-color: var(--linha-forte);
}

@media (prefers-reduced-motion: reduce) {
  .escolha,
  .escolha:hover {
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   A BARRA QUE ESCOLHE
   ------------------------------------------------------------------------- */

/* Nao e um `<button>` e nao se veste como um: e um `<label>`. Um botao cheio
   aqui prometia que alguma coisa acontecia ao carregar, e o que acontece e
   apenas ficar marcado. Fio a toda a volta, fundo de papel — le-se como
   accao, sem competir com o unico botao a serio da pagina. */
.escolha__accao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  margin: 0;
  padding: 12px 14px;

  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-top: 1px solid var(--linha);
  border-radius: 0 0 var(--r2) var(--r2);

  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.005em;

  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.escolha__accao:hover {
  background: var(--amarelo);
  border-color: var(--tinta);
}

/* A marca redonda. Vazia enquanto nao se escolhe — e um sitio por preencher,
   que e exactamente o que ela quer dizer. */
.escolha__caixa {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--branco);
  transition: background .2s ease, border-color .2s ease;
}

.escolha__caixa svg {
  width: 12px;
  height: 12px;
  color: var(--branco);
  opacity: 0;
  transition: opacity .15s ease;
}

/* Duas palavras no mesmo sitio, e so uma de cada vez. A barra tem de MUDAR
   quando fica marcada: sem isso o cliente carrega segunda vez a procura de
   uma confirmacao que ja tinha acontecido. */
.escolha__texto--marcado { display: none; }

/* -------------------------------------------------------------------------
   O ESTADO MARCADO — CSS E MAIS NADA
   ------------------------------------------------------------------------- */

.escolha__radio:checked ~ .pacote {
  border-color: var(--tinta);
}

.escolha__radio:checked ~ .escolha__accao {
  background: var(--tinta);
  color: var(--tinta-inv);
  border-color: var(--tinta);
}

.escolha__radio:checked ~ .escolha__accao:hover {
  background: var(--tinta);
  color: var(--tinta-inv);
}

.escolha__radio:checked ~ .escolha__accao .escolha__caixa {
  background: transparent;
  border-color: var(--tinta-inv);
}

.escolha__radio:checked ~ .escolha__accao .escolha__caixa svg { opacity: 1; }

.escolha__radio:checked ~ .escolha__accao .escolha__texto--livre { display: none; }
.escolha__radio:checked ~ .escolha__accao .escolha__texto--marcado { display: inline; }

/* O halo do escolhido. Vive num `:has()` e por isso e um extra: onde o
   browser nao o entender cai a regra e fica tudo o que esta acima, que ja
   chega para se saber qual e o cartao. */
.escolha:has(.escolha__radio:checked) {
  box-shadow: 0 0 0 3px var(--amarelo-luz), var(--sombra-2);
}

/* O FOCO DO TECLADO TEM DE SE VER NO CARTAO, e nao num rádio de um pixel a
   que ninguem chamou nada. Percorre-se o grupo com as setas, e a cada seta o
   cartao inteiro acende. */
.escolha__radio:focus-visible ~ .pacote,
.escolha__radio:focus-visible ~ .escolha__accao {
  outline: 2px solid var(--tinta);
  outline-offset: -2px;
}

/* -------------------------------------------------------------------------
   A AREA DE COMPRA
   ------------------------------------------------------------------------- */

.comprar {
  margin-top: clamp(22px, 3.4vw, 38px);
  /* A ancora `#comprar` e o destino do "+" e do "Ver o total" sem
     JavaScript: sem folga, a caixa encostava ao topo do ecra e o cliente
     nao via de onde tinha vindo. */
  scroll-margin-top: clamp(16px, 6vw, 90px);
}

.comprar__caixa {
  display: grid;
  gap: clamp(12px, 1.8vw, 18px);
  padding: clamp(16px, 2.6vw, 26px);
  background: var(--branco);
  border: 1px solid var(--tinta);
  border-radius: var(--r3);
  box-shadow: var(--sombra-2);
}

.comprar__cabeca {
  display: grid;
  gap: 6px;
  padding-bottom: clamp(10px, 1.6vw, 14px);
  border-bottom: 1px solid var(--linha);
}

.comprar__titulo {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.comprar__rotulo {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.comprar__pacote {
  display: grid;
  gap: 3px;
  margin: 0;
}

/* O que se escolheu, escrito por extenso. Nao e decoracao: o cartao pode ter
   ficado fora do ecra, e um total sem o nome do que o gerou e um numero
   solto. */
.comprar__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  font-size: clamp(.95rem, 2vw, 1.08rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
}

.comprar__nome span[aria-hidden] { color: var(--linha-forte); }

/* Enquanto nao ha escolha nao se finge que ha. E um convite, e le-se como
   tal — nao como um valor. */
.comprar__nome--vazio {
  font-weight: 500;
  color: var(--tinta-3);
}

.comprar__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 26px);
}

.comprar__quantidade {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.comprar__ajuda {
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--tinta-3);
}

/* -------------------------------------------------------------------------
   O CONTADOR
   ------------------------------------------------------------------------- */

/* Os dois botoes sao de SUBMISSAO e nao de clique — sem JavaScript carregar
   em "+" recarrega a pagina com mais um viajante e o total refeito pelo
   servidor. Aqui so se veste; a razao esta escrita no partial. */
.contador {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--rmax);
}

.contador__botao {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background .18s ease;
}

.contador__botao:hover:not(:disabled) { background: var(--papel-2); }
.contador__botao:active:not(:disabled) { background: var(--linha); }

.contador__botao:disabled {
  opacity: .28;
  cursor: not-allowed;
}

.contador__botao svg {
  width: 20px;
  height: 20px;
}

.contador__numero {
  min-width: 2.4ch;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 650;
  color: var(--tinta);
}

/* -------------------------------------------------------------------------
   O TOTAL
   ------------------------------------------------------------------------- */

.comprar__total {
  display: grid;
  gap: 2px;
  justify-items: end;
  margin: 0;
  margin-left: auto;
  text-align: right;
}

/* O maior numero da caixa, e de longe. E a pergunta que o cliente traz. */
.comprar__valor {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--tinta);
}

/* "2 × 12.500 Kz". Um numero grande sem a conta ao lado e um numero em que
   se desconfia. */
.comprar__conta {
  font-size: .82rem;
  color: var(--tinta-3);
}

.comprar__conta:empty { display: none; }

/* -------------------------------------------------------------------------
   O AVISO, O BOTAO E A NOTA
   ------------------------------------------------------------------------- */

.comprar__aviso {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 13px;
  background: var(--alerta-fundo);
  color: var(--alerta);
  border-radius: var(--r2);
  font-size: .86rem;
  font-weight: 550;
  line-height: 1.4;
}

.comprar__aviso[hidden] { display: none; }

.comprar__aviso svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.comprar__accoes {
  display: grid;
  gap: 9px;
  justify-items: center;
}

/* UM botao, largo, e o unico cheio desta pagina. */
.comprar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  font-size: 1.02rem;
}

.comprar__cta svg {
  width: 19px;
  height: 19px;
  transition: transform .25s ease;
}

.comprar__cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .comprar__cta svg,
  .comprar__cta:hover svg { transition: none; transform: none; }
}

.comprar__nota {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--tinta-3);
  text-align: center;
}

/* -------------------------------------------------------------------------
   ECRA ESTREITO
   ------------------------------------------------------------------------- */

/* O contador e o total lado a lado num telemovel ficavam com 120px cada e o
   total quebrava a meio do numero. Empilham, e o total passa a ocupar a
   largura toda — que e o que ele merece. */
@media (max-width: 560px) {
  .comprar__linha {
    align-items: stretch;
    justify-content: flex-start;
  }

  .comprar__quantidade,
  .comprar__total {
    flex: 1 1 100%;
  }

  .comprar__total {
    justify-items: start;
    margin-left: 0;
    text-align: left;
    padding-top: 4px;
    border-top: 1px solid var(--linha);
  }
}

/* =========================================================================
   O PASSO 4: O ECRA DE PAGAR
   =========================================================================

   Vive nesta folha e nao na estilo.css pela mesma razao que o resto dela:
   esta peca esta a ser refeita em paralelo com outras, e duas pessoas a
   escrever no mesmo ficheiro perdem trabalho uma da outra. Funde-se quando
   assentar. A estilo.css continua a mandar no esqueleto — `.checkout`,
   `.checkout__resumo`, `.meio`, `.resumo__linha` — e o que esta aqui e o que
   o passo 4 acrescentou.

   O QUE MUDOU E PORQUE:

     A NUMERACAO INTERNA CAIU. A pagina tinha "1. Os seus dados, 2. Pagamento,
     3. Recebe o eSIM" dentro de um ecra que a barra la em cima ja chama
     "Passo 4 de 4". Duas contagens diferentes no mesmo ecra fazem a pessoa
     parar a somar; o que ficou foram blocos com titulo e mais nada.

     O NOME E O NIF FECHARAM-SE NUMA GAVETA. Interessam a quem viaja pela
     empresa e a mais ninguem. Dois campos sempre abertos alongavam o ecra
     para toda a gente por causa de uma minoria.

   ========================================================================= */

/* -------------------------------------------------------------------------
   OS BLOCOS DA COLUNA ESQUERDA
   ------------------------------------------------------------------------- */

.checkout__blocos {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
}

.checkout__bloco {
  display: grid;
  gap: 14px;
  align-content: start;
}

.checkout__bloco > h2 {
  font-size: 1.15rem;
  margin: 0;
}

/* O paragrafo que explica o bloco. Cinzento e curto: quem ja sabe o que ali
   se pede salta-o, e quem nao sabe le uma linha e nao um paragrafo. */
.checkout__bloco-lead {
  margin: 0;
  font-size: 14.5px;
  color: var(--tinta-2);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   A GAVETA DOS CAMPOS OPCIONAIS

   E um <details>: abre sem JavaScript, fica no percurso do teclado e o
   browser sabe procurar texto la dentro. Nao ha aqui nenhum estado que o
   script guarde.
   ------------------------------------------------------------------------- */

.gaveta {
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  background: var(--papel);
}

.gaveta__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r2);
}

/* O triangulo do sistema sai nos dois motores; a seta que fica e nossa e
   roda ao abrir. */
.gaveta__cabeca::-webkit-details-marker { display: none; }
.gaveta__cabeca::marker { content: ''; }

.gaveta__cabeca:hover { background: var(--papel-2); }

.gaveta__cabeca:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.gaveta__seta {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--tinta-2);
  transition: transform .2s ease;
}

.gaveta[open] .gaveta__seta { transform: rotate(180deg); }

.gaveta[open] .gaveta__cabeca { border-bottom: 1px solid var(--linha); border-radius: var(--r2) var(--r2) 0 0; }

.gaveta__corpo {
  display: grid;
  gap: 16px;
  padding: 16px;
}

/* -------------------------------------------------------------------------
   AS FORMAS DE PAGAMENTO

   As tres estao SEMPRE nomeadas — referencia Multicaixa, Multicaixa Express,
   cartao. "Posso pagar como?" decide-se antes de a pessoa escrever o email, e
   uma pagina que nao responde a isso perde a venda ali.

   A QUE AINDA NAO ESTA LIGADA NAO E UM RADIO. Nao tem `name`, nao tem
   `value`, nao se marca e nao se submete: e uma linha dita, com a etiqueta ao
   lado a dizer o estado. Um botao que parece cobrar e nao cobra e pior do que
   botao nenhum, porque so se descobre depois de escrever os dados todos.

   E NAO LEVA AMARELO. O amarelo desta loja e superficie de destaque; pinta-lo
   sobre o que ainda nao funciona era destacar precisamente o que nao se pode
   usar.
   ------------------------------------------------------------------------- */

.meios__titulo {
  margin: 0 0 2px;
}

.meio--espera .meio__corpo {
  display: grid;
  gap: 5px;
  border-style: dashed;
  background: var(--papel);
  cursor: default;
}

.meio--espera .meio__nome,
.meio--espera .meio__texto {
  color: var(--tinta-3);
}

.meio__estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin-top: 3px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--rmax);
  background: var(--branco);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta-2);
}

.meio__estado svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   A SAIDA A MAO

   Enquanto nao houver carril ligado, a compra faz-se por uma pessoa. Isso
   diz-se com a porta aberta e no fim do bloco do pagamento — nao num rodape
   nem em letra pequena. Um cliente que chega ao ultimo ecra e nao encontra
   maneira de pagar sai do site, e nao volta.
   ------------------------------------------------------------------------- */

.saida {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--amarelo);
  border-radius: var(--r2);
  background: var(--papel);
}

.saida__titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--tinta);
}

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

.saida .botao { margin-top: 4px; }

/* -------------------------------------------------------------------------
   O RESUMO: A FAIXA DA VOZ

   A mesma faixa do cartao da grelha, e pela mesma razao. Vinte pacotes do
   catalogo levam minutos de chamadas e sao o unico produto que a concorrencia
   global nao vende; quem escolheu um escolheu-o por eles. Um resumo que os
   nao mencione poe a pessoa a duvidar de que comprou o que queria, e a duvida
   no ultimo ecra e a compra perdida.

   Amarelo como SUPERFICIE, com tinta escura por cima. Nunca amarelo como cor
   de texto.
   ------------------------------------------------------------------------- */

.resumo__voz {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 9px 13px;
  border-radius: var(--r1);
  background: var(--amarelo);
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.resumo__voz svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* O que o pacote inclui, por extenso. So aparece onde o catalogo declara
   alguma coisa: um campo vazio quer dizer "nao sabemos" e nao "nao tem". */
.resumo__inclui {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}

.resumo__inclui-titulo {
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.resumo__lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resumo__lista li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: var(--tinta-2);
  line-height: 1.55;
}

.resumo__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta-3);
}

/* -------------------------------------------------------------------------
   O CONTADOR DE eSIM DENTRO DO RESUMO

   E um formulario GET a parte, que recarrega esta pagina com `?viajantes=`.
   Sem JavaScript o numero muda e o total vem refeito do servidor; com
   JavaScript muda no sitio. O `.contador` la em cima nesta folha e o mesmo do
   passo 3 — mesma peca, mesmo gesto, aprendido uma vez so.
   ------------------------------------------------------------------------- */

.quantidade {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}

.quantidade__rotulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
}

.quantidade .contador { justify-self: end; }

.quantidade__ver {
  grid-column: 1 / -1;
  justify-self: start;
}

.quantidade__ajuda {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
  color: var(--tinta-3);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   QUANDO E QUE O eSIM CHEGA

   Dito por PACOTE e nunca numa faixa fixa no topo da pagina. "Entrega
   imediata" e verdade na quase totalidade do catalogo e falso nos pacotes de
   voz, que uma pessoa prepara a mao. Prometer imediato e demorar tres horas e
   o caminho mais curto para um reembolso, e esta loja vive de boca-a-boca.

   O que e a mao leva risco amarelo a esquerda: nao e um alerta — nao ha nada
   de errado com o pacote — e uma condicao do produto que a pessoa tem de ler
   antes de pagar.
   ------------------------------------------------------------------------- */

.resumo__entrega {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  background: var(--papel);
}

.resumo__entrega--mao {
  border-left: 3px solid var(--amarelo);
}

.resumo__entrega-titulo {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.resumo__entrega p:not(.resumo__entrega-titulo) {
  margin: 0;
  font-size: 13.5px;
  color: var(--tinta-2);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   A BARRA DE PASSOS DENTRO DESTE ECRA

   Substituiu as migalhas nesta pagina, e por isso encosta ao topo do
   conteudo: duas navegacoes a dizer a mesma coisa eram duas navegacoes a
   ocupar altura num ecra que se quer sem deslizar.
   ------------------------------------------------------------------------- */

#checkout .passos {
  margin-bottom: clamp(20px, 2.6vw, 28px);
}

/* Num telemovel o contador ganha a linha toda: o rotulo e o botao de mais
   apertados a 320px ficavam com area de toque a menos. */
@media (max-width: 560px) {
  .quantidade {
    grid-template-columns: 1fr;
  }

  .quantidade .contador { justify-self: start; }
}

/* -------------------------------------------------------------------------
   DUAS COLUNAS MAIS CEDO, E ESTA E A CORRECCAO QUE MAIS PESA NESTE ECRA.

   A estilo.css so poe o resumo ao lado do formulario a partir de 1320px. Numa
   janela de 1200x900 — a que se mediu — o resumo caia PARA BAIXO do
   formulario e comecava aos 1760px: o cliente tinha de deslizar duas vezes o
   ecra inteiro para ver o que estava a comprar e quanto custava. Num ecra
   cuja unica pergunta e "paga como?", o preco tem de estar a vista ao mesmo
   tempo que a pergunta.

   Desce para 1000px, que e onde a coluna estreita ainda leva o total, o
   contador e a linha da entrega sem partir palavras. Abaixo disso volta a ser
   uma coluna, e ai o resumo vem depois do formulario de propósito: num
   telemovel a ordem de leitura e a ordem do documento, e trocá-las punha o
   percurso do teclado ao contrario do que se ve.
   ------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .checkout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  /* Cola-se ao topo: quem desce ate aos meios de pagamento continua a ver o
     total do que esta a pagar. */
  .checkout__resumo {
    position: sticky;
    top: 96px;
  }
}

/* -------------------------------------------------------------------------
   O ECRA ENCOLHE PARA CABER, E ESTAS SAO AS TRES ALTURAS QUE SE CORTARAM.

   Mediu-se a pagina numa janela de 1200x900, que e a que o dono usa. O topo
   comia 473px antes de a primeira caixa comecar: 96px de respiro da seccao,
   um titulo de 65px e 48px de intervalo. Nada disso e informacao — e ar a
   empurrar o total para fora do ecra.

   O h1 desce de escala porque nesta pagina ele nao e o argumento: a barra de
   passos ja disse onde a pessoa esta, e o que ela veio ler e o total e as
   formas de pagamento. Nas outras paginas o titulo continua igual — isto
   esta preso ao `#checkout` de proposito.
   ------------------------------------------------------------------------- */

#checkout {
  padding-top: clamp(28px, 4vw, 52px);
}

#checkout .seccao__cabeca {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

#checkout h1 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}

/* As linhas do resumo respiravam 12px em cima e em baixo. A nove ainda se
   lêem separadas e o total sobe 24px. */
#checkout .resumo__linha {
  padding: 9px 0;
}

/* As juntas do resumo, apertadas de 16-18px para 12-14px. Sao cinco cortes
   de quatro pixels cada e o total do pacote de voz — o resumo mais alto que
   a loja tem, porque leva a faixa das chamadas e a linha dos minutos —
   passa a estar dentro do ecra de 900px em vez de dezassete pixels abaixo
   dele. Um total meio cortado pela dobra e um total que se vai procurar. */
#checkout .checkout__resumo h2 { margin-bottom: 14px; }
#checkout .resumo__voz { margin-bottom: 12px; }
#checkout .resumo__inclui { margin-top: 12px; padding-top: 12px; }
#checkout .quantidade { margin-top: 12px; padding-top: 12px; }
#checkout .resumo__total { margin-top: 14px; }