/* =============================================================
   AfroChip — CARTOES-PRESENTE
   =============================================================

   FOLHA PROPRIA, E NAO E ARRUMACAO. A `estilo.css` esta a ser mexida por
   outras pessoas ao mesmo tempo; ja se perdeu trabalho neste projecto por
   dois lados a guardar por cima um do outro. Esta folha entra DEPOIS da
   principal no molde, mesma especificidade, e a ultima ganha.

   NAO SE REDEFINE NADA DA PRINCIPAL. O `envelope`, a `seccao`, a
   `cabeca-pagina`, o `campo`, o `botao` e as `migalhas` sao de la e usam-se
   tal e qual. Aqui so vive o que e proprio desta loja.

   -------------------------------------------------------------------
   PORQUE E QUE ISTO NAO SE PARECE COM A GRELHA DO eSIM.

   La as ofertas comparam-se entre si — 5 GB contra 10 GB, 7 dias contra 30 —
   e a grelha e uma escada de volumes, com cartoes grandes lado a lado.

   Aqui a coisa e outra: um cartao Adidas e um cartao Xbox NAO se comparam.
   Escolhem-se pela PESSOA que vai receber. Por isso as duas primeiras
   paginas sao LISTAS DENSAS de marcas — a densidade e a funcionalidade,
   porque 54 marcas em cartoes grandes sao seis ecras de rolagem — e so a
   terceira, dentro da mesma marca, e que volta a ser uma escada.
   -------------------------------------------------------------------

   TUDO ISTO FUNCIONA SEM JAVASCRIPT. Nao ha nesta folha um unico estado que
   dependa de uma classe posta por script: os filtros sao formularios GET, os
   estados de erro vem do servidor no HTML, e o resto e `:hover` e `:focus`.

   SEM EMOJI. Os simbolos sao SVG desenhado a mao nas vistas. Ha um teste que
   varre as paginas e falha se aparecer um emoji.

   INDICE
     1. blocos comuns as quatro paginas
     2. a entrada: procura e paises
     3. o pais: filtro, categorias, marcas
     4. a marca: a escada de valores
     5. o cartao: ficha, preco, formulario
     6. o resumo: meios de pagamento e saida a mao
     7. ecras estreitos
   ============================================================= */


/* =============================================================
   1. BLOCOS COMUNS
   ============================================================= */

/* A lista vazia e o rodape de nota. Os dois sao texto de servico: dizem-se
   em tinta fraca e com medida propria, porque uma linha de 1700px nao se le. */
.presentes-vazio,
.presentes-nota {
  max-width: 68ch;
  margin: 24px 0 0;
  color: var(--tinta-2);
  font-size: .95rem;
  line-height: 1.65;
}

.presentes-nota {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-3);
  font-size: .9rem;
}

.presentes-vazio {
  padding: 24px 22px;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
}

/* As listas desta loja nao tem marcas de lista: cada item e um cartao ou uma
   linha com moldura propria, e o ponto preto ao lado seria ruido. */
.presentes-paises,
.presentes-marcas,
.presentes-escada,
.presentes-achados__lista,
.presente-meios {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* =============================================================
   2. A ENTRADA: PROCURA E PAISES
   ============================================================= */

/* A procura vem ANTES dos paises e e a unica coisa que fura o funil: quem
   escreve "Netflix" nao tem de saber que a Netflix esta na Africa do Sul.
   Por isso tem largura de leitura e nao de ecra — e um campo, nao uma barra. */
.presentes-procura {
  max-width: 620px;
  margin: 0 0 8px;
}

.presentes-achados {
  margin-top: 28px;
}

.presentes-achados__lista {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 14px;
}

/* OS TRES PAISES. Sao tres, e por isso podem ser cartoes grandes: e a unica
   pagina desta loja onde a lista e curta o suficiente para isso. */
.presentes-paises {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 8px;
}

.presente-pais {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 26px 24px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  box-shadow: var(--sombra-1);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .25s var(--saida), border-color .25s var(--suave), transform .25s var(--saida);
}

.presente-pais:hover,
.presente-pais:focus-visible {
  border-color: var(--tinta);
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}

.presente-pais__nome {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

/* "para quem esta em Portugal" — e a frase que explica o pais sem o repetir. */
.presente-pais__quem {
  color: var(--tinta-2);
  font-size: .95rem;
}

.presente-pais__conta {
  margin-top: 4px;
  color: var(--tinta-3);
  font-size: .8rem;
  letter-spacing: .02em;
}

.presente-pais__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: .92rem;
  font-weight: 600;
}

.presente-pais__cta svg {
  width: 18px;
  height: 18px;
  transition: transform .25s var(--saida);
}

.presente-pais:hover .presente-pais__cta svg {
  transform: translateX(4px);
}

/* Os tres passos da compra, na entrada. Numeros em mono dentro de um disco
   amarelo: o amarelo e superficie e nunca tinta sobre claro. */
.presentes-passos {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.presentes-passos li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 18px;
  background: var(--papel-2);
  border-radius: var(--r2);
  color: var(--tinta-2);
  font-size: .95rem;
  line-height: 1.6;
}

.presentes-passos__numero {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: var(--amarelo);
  border-radius: var(--rmax);
  color: var(--tinta);
  font-size: .85rem;
  font-weight: 600;
}


/* =============================================================
   3. O PAIS: FILTRO, CATEGORIAS, MARCAS
   ============================================================= */

.presentes-filtro {
  max-width: 520px;
  margin: 0 0 34px;
}

.presentes-grupo + .presentes-grupo {
  margin-top: 38px;
}

/* O titulo da categoria e uma etiqueta, nao um cabecalho de seccao: e o
   separador de uma prateleira, e compete com o `h1` se for grande. */
.presentes-grupo__titulo {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* 54 MARCAS EM COLUNAS ESTREITAS, E A DENSIDADE E A FUNCIONALIDADE.
   Em cartoes grandes isto sao seis ecras de rolagem; assim, o Brasil inteiro
   cabe em dois. Cada linha traz o nome, quantos cartoes tem e desde quanto —
   que e o que evita um toque para descobrir que a marca comeca acima do que
   ele queria gastar. */
.presentes-marcas,
.presentes-achados__lista {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.presente-marca {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 14px;
  height: 100%;
  padding: 15px 17px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--suave), box-shadow .2s var(--suave);
}

.presente-marca:hover,
.presente-marca:focus-visible {
  border-color: var(--tinta);
  box-shadow: var(--sombra-2);
}

.presente-marca__nome {
  grid-column: 1;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

/* O "desde X Kz" alinha a direita e em mono: e um numero, e os numeros de
   uma coluna leem-se comparados quando tem a mesma largura de algarismo. */
.presente-marca__desde {
  grid-column: 2;
  grid-row: 1;
  color: var(--tinta);
  font-size: .85rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.presente-marca__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1 / -1;
  color: var(--tinta-3);
  font-size: .8rem;
}


/* =============================================================
   4. A MARCA: A ESCADA DE VALORES
   =============================================================

   A UNICA PAGINA DESTA LOJA ONDE AS OFERTAS SE COMPARAM ENTRE SI, porque e a
   unica onde a diferenca entre elas e um numero so. Duas colunas, e a ordem
   e a pergunta do cliente: o que ele recebe, e depois quanto me custa. */

.presentes-escada__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 18px;
  padding: 0 18px 8px;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-3);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.presentes-escada {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.presente-valor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--suave), box-shadow .2s var(--suave);
}

.presente-valor:hover,
.presente-valor:focus-visible {
  border-color: var(--tinta);
  box-shadow: var(--sombra-2);
}

.presente-valor__face,
.presente-valor__custo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* OS ROTULOS POR LINHA: INVISIVEIS NO COMPUTADOR, MAS NAO AUSENTES.

   No computador o cabecalho de colunas ja diz "Ele recebe" e "Custa-lhe" uma
   vez, e repeti-lo em cada linha seria ruido — MAS ESSE CABECALHO E
   `aria-hidden`, porque para quem ouve a pagina uma linha de titulos soltos
   nao se liga a coluna nenhuma.

   Se estes rotulos fossem `display: none`, quem usa leitor de ecra ouvia
   "150,00 BRL ... 32.300 Kz" sem saber qual e qual — dois numeros seguidos,
   um em moeda estrangeira e outro em kwanzas, e nenhum com nome. Por isso
   escondem-se do olho e nao do leitor, com a `.so-leitores` da folha
   principal. No telemovel voltam a ser visiveis (ver o fim desta folha). */
.presente-valor__rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  color: var(--tinta-3);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* O VALOR DE FACE EM PRIMEIRO PLANO. E o que se oferece: quem manda um
   presente escolhe "50 BRL", nao "43.100 Kz". */
.presente-valor__numero {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
}

.presente-valor__etiqueta {
  align-self: flex-start;
  margin-top: 3px;
  padding: 3px 8px;
  background: var(--amarelo-luz);
  border-radius: var(--rmax);
  color: var(--tinta-2);
  font-size: .72rem;
  line-height: 1.3;
}

.presente-valor__total {
  font-size: 1.1rem;
  font-weight: 600;
}

/* A TAXA, JA AQUI. Ver a taxa so no fim e a definicao de uma taxa escondida. */
.presente-valor__conta {
  color: var(--tinta-3);
  font-size: .78rem;
}

.presente-valor__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta-2);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}

.presente-valor__cta svg {
  width: 17px;
  height: 17px;
  transition: transform .2s var(--saida);
}

.presente-valor:hover .presente-valor__cta svg {
  transform: translateX(3px);
}


/* =============================================================
   5. O CARTAO: FICHA, PRECO, FORMULARIO
   =============================================================

   DUAS COLUNAS, E A DA ESQUERDA E MAIS ESTREITA DE PROPOSITO. A esquerda
   responde a "o que ele recebe e quanto me custa" e le-se de uma vez; a
   direita e trabalho — escrever nomes e um email — e trabalho quer espaco.

   No telemovel empilham por esta ordem, que e a ordem da pergunta. */

.presente-ficha {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}

.presente-ficha__coluna {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.presente-bloco {
  padding: 26px 24px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  box-shadow: var(--sombra-1);
}

/* O bloco do preco em papel e nao em branco: separa-o do que esta em cima
   sem lhe pintar uma moldura mais forte, que o faria parecer um alerta. */
.presente-bloco--preco {
  background: var(--papel-2);
  box-shadow: none;
}

.presente-bloco__titulo {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.presente-bloco__texto {
  max-width: 60ch;
  margin: 14px 0 0;
  color: var(--tinta-2);
  font-size: .92rem;
  line-height: 1.65;
}

.presente-bloco__voltar {
  margin: 18px 0 0;
  font-size: .9rem;
}

/* O VALOR DE FACE, GRANDE. E a resposta a primeira pergunta do ecra, e por
   isso e o maior numero da pagina — maior do que o total em kwanzas. */
.presente-face {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.presente-face__numero {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.presente-face__marca {
  color: var(--tinta-2);
  font-size: 1.05rem;
  font-weight: 500;
}

.presente-detalhes {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
}

.presente-detalhes__linha {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 6px 18px;
  padding: 11px 0;
  border-top: 1px solid var(--linha);
}

.presente-detalhes__linha dt {
  color: var(--tinta-3);
  font-size: .85rem;
}

.presente-detalhes__linha dd {
  margin: 0;
  font-size: .95rem;
}

.presente-detalhes--saida {
  margin-top: 24px;
}


/* --- AS TRES LINHAS DO PRECO -----------------------------------------
   Valor do cartao / Taxa de servico (12,1%) / Total.

   AS TRES SOMAM A VISTA, SEMPRE — o dominio garante
   `faceKz + taxaKz === totalKz`. Esta folha nao pode dar-lhes um desenho que
   sugira outra coisa: por isso e uma lista de definicoes com um fio a separar
   o total, e nao tres numeros soltos.

   A TAXA NAO SE ESCONDE. Nao ha aqui um `font-size` mais pequeno para a
   linha do meio, nem uma tinta mais fraca do que a do valor: uma taxa
   despintada e uma taxa escondida com outro nome. */

.presente-preco {
  display: grid;
  gap: 0;
  margin: 0;
}

.presente-preco__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
}

.presente-preco__linha + .presente-preco__linha {
  border-top: 1px solid var(--linha);
}

.presente-preco__linha dt {
  color: var(--tinta-2);
  font-size: .95rem;
}

.presente-preco__linha dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* O total: fio mais forte por cima, e o unico numero grande do bloco. */
.presente-preco__linha--total {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 2px solid var(--tinta) !important;
}

.presente-preco__linha--total dt {
  color: var(--tinta);
  font-weight: 600;
  font-size: 1rem;
}

.presente-preco__linha--total dd {
  font-size: 1.4rem;
  font-weight: 600;
}

.presente-preco__nota {
  max-width: 60ch;
  margin: 14px 0 0;
  color: var(--tinta-3);
  font-size: .85rem;
  line-height: 1.6;
}


/* --- O FORMULARIO ---------------------------------------------------
   Os campos sao os da `estilo.css` (`campo`, `campo__rotulo`,
   `campo__caixa`, `campo__entrada`, `campo__ajuda`, `campo__erro`) e nao se
   redefinem aqui. O que e proprio desta loja e o cabecalho de cada metade —
   "para quem e" e "para onde vai o codigo" — e o espaco entre elas. */

.presente-formulario,
.presente-saida {
  padding: 26px 24px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  box-shadow: var(--sombra-1);
}

.presente-formulario .campo {
  margin-top: 16px;
}

.presente-formulario__titulo {
  margin: 0;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* O segundo cabecalho — o do contacto — leva um fio por cima: separa "para
   quem e o presente" de "para onde vai o codigo", que sao duas pessoas
   diferentes e ja se confundiram. */
.presente-formulario__titulo + .presente-formulario__lead + .campo,
.presente-formulario .campo + .presente-formulario__titulo {
  margin-top: 16px;
}

.presente-formulario .campo + .presente-formulario__titulo,
.presente-formulario__lead + .presente-formulario__titulo {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
}

.presente-formulario__lead {
  max-width: 58ch;
  margin: 8px 0 0;
  color: var(--tinta-2);
  font-size: .92rem;
  line-height: 1.6;
}

.presente-formulario .botao {
  margin-top: 26px;
}

.presente-formulario__nota {
  max-width: 58ch;
  margin: 12px 0 0;
  color: var(--tinta-3);
  font-size: .85rem;
  line-height: 1.55;
}


/* =============================================================
   6. O RESUMO: MEIOS DE PAGAMENTO E SAIDA A MAO
   ============================================================= */

.presente-meios {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.presente-meio {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 16px 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  cursor: pointer;
  transition: border-color .2s var(--suave), background .2s var(--suave);
}

.presente-meio:hover {
  border-color: var(--linha-forte);
}

/* O estado escolhido vem do proprio `:checked` e nao de uma classe posta por
   script: sem JavaScript o radio marca-se na mesma e a moldura acompanha. */
.presente-meio:has(input:checked) {
  border-color: var(--tinta);
  background: var(--branco);
}

.presente-meio input {
  margin-top: 3px;
}

.presente-meio__corpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.presente-meio__nome {
  font-weight: 600;
  font-size: .98rem;
}

.presente-meio__texto {
  color: var(--tinta-2);
  font-size: .88rem;
  line-height: 1.55;
}

/* A saida a mao, enquanto nao houver carril de cobranca ligado para
   cartoes-presente. Nao e um erro e nao se pinta como um: e um caminho
   alternativo, e o desenho tem de o dizer. */
.presente-saida .botao {
  margin-top: 22px;
}


/* =============================================================
   7. ECRAS ESTREITOS
   =============================================================

   A maior parte destas visitas e num telemovel com rede fraca, e e por isso
   que nada aqui depende de um `@media` para funcionar: as grelhas sao
   `auto-fit`/`auto-fill` e ja se dobram sozinhas. O que muda a seguir e so o
   que uma grelha automatica nao sabe: quando duas colunas de sentidos
   diferentes tem de passar a duas linhas com rotulo proprio. */

@media (max-width: 900px) {
  .presente-ficha {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {

  /* A ESCADA DEIXA DE SER DUAS COLUNAS. Um valor de face e um preco em
     kwanzas lado a lado em 340px sao dois numeros encavalitados, e ja nao se
     percebe qual e qual. Passam a duas linhas, cada uma com o seu rotulo — os
     rotulos que estavam escondidos no cabecalho de colunas. */
  .presentes-escada__cabeca {
    display: none;
  }

  .presente-valor {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* Aqui voltam a ver-se: sem cabecalho de colunas, cada linha tem de dizer
     por si o que e cada numero. Desfaz-se o recorte da regra de cima. */
  .presente-valor__rotulo {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }

  .presente-valor__custo {
    padding-top: 13px;
    border-top: 1px solid var(--linha);
  }

  .presente-valor__cta {
    justify-content: flex-start;
  }

  .presente-bloco,
  .presente-formulario,
  .presente-saida {
    padding: 22px 18px;
  }

  .presente-detalhes__linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Quem pediu menos movimento nao leva nenhum. */
@media (prefers-reduced-motion: reduce) {
  .presente-pais,
  .presente-marca,
  .presente-valor,
  .presente-meio,
  .presente-pais__cta svg,
  .presente-valor__cta svg {
    transition: none;
  }

  .presente-pais:hover,
  .presente-pais:focus-visible {
    transform: none;
  }

  .presente-pais:hover .presente-pais__cta svg,
  .presente-valor:hover .presente-valor__cta svg {
    transform: none;
  }
}

/* =============================================================
   AS MARCAS TODAS, EM CARTOES
   =============================================================

   O indice mostrava tres cartoes de pais e uma caixa de procura.
   O dono deu por isso: "nao quero procurar pq as pessoas nao vao
   conseguir achar todos que tem, quero que aparecam mesmo ja ai
   em forma de cartoes".

   Sao 69 marcas. A grelha enche-se sozinha com `auto-fill` e
   `minmax`, e por isso nao ha aqui uma unica media query: o
   numero de colunas sai da largura, e passa de duas num
   telemovel a seis num ecra largo sem ninguem escrever fronteiras.
   ============================================================= */

.presentes-mercado + .presentes-mercado {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.presentes-mercado__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding-bottom: .7rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--linha);
}

.presentes-mercado__nome {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 600;
  color: var(--tinta);
}

.presentes-mercado__quem {
  margin: 0;
  flex: 1 1 12rem;
  font-size: .92rem;
  color: var(--tinta-2);
}

.presentes-mercado__conta {
  margin: 0;
  font-size: .8rem;
  color: var(--tinta-3);
  white-space: nowrap;
}

.presentes-marcas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.presente-marca {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  height: 100%;
  padding: .9rem .85rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  background: var(--branco);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.presente-marca:hover,
.presente-marca:focus-visible {
  border-color: var(--tinta);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

/* A FIGURA. Enquanto nao houver logotipos verdadeiros, e a inicial
   sobre a cor da marca. O matiz vem do `style` inline, calculado do
   nome; a saturacao e a luz sao fixas aqui para nenhuma marca sair
   ilegivel — uma cor por acaso escura com texto escuro em cima e
   uma marca que ninguem le. */
.presente-marca__figura {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: .6rem;
  border-radius: var(--r2);
  background: hsl(var(--marca-matiz, 45) 62% 92%);
  border: 1px solid hsl(var(--marca-matiz, 45) 45% 82%);
}

.presente-marca__inicial {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--marca-matiz, 45) 55% 28%);
}

.presente-marca__nome {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
}

.presente-marca__desde {
  font-size: .8rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* O logotipo, quando existir. `contain` e nao `cover`: um logotipo
   cortado nas pontas para encher a caixa deixa de ser o logotipo. */
.presente-marca__logo {
  max-width: 72%;
  max-height: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   O ÍNDICE DE LETRAS, E AS SECÇÕES POR LETRA

   Entraram quando a página principal deixou de perguntar o país e passou a
   mostrar as 666 marcas de uma vez. Uma lista corrida dessas não se percorre:
   as letras são a forma de saltar sem ser preciso escrever nada — o que é
   diferente de uma caixa de procura, que exige saber o nome à partida.

   São âncoras `#letra-a`, HTML puro. Sem uma linha de JavaScript: funcionam
   com o teclado, com o botão de voltar, e numa rede que nunca carregou um
   script.
   ========================================================================== */

.presentes-letras {
  margin: 0 0 2.5rem;
}

.presentes-letras ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.presentes-letras a {
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 .35rem;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}

.presentes-letras a:hover,
.presentes-letras a:focus-visible {
  background: var(--amarelo, #FFD400);
  border-color: rgba(0, 0, 0, .3);
}

.presentes-letra {
  margin: 0 0 2.75rem;
  /* O salto de âncora não pode esconder o título debaixo do cabeçalho fixo. */
  scroll-margin-top: 5.5rem;
}

.presentes-letra__nome {
  margin: 0 0 1rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(0, 0, 0, .1);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   O PAÍS, EM CADA LINHA DE VALOR

   Dentro de uma marca há cartões de vários países — a Netflix tem 41 em oito
   — e sem esta etiqueta são linhas iguais com preços diferentes e nenhuma
   razão à vista para a diferença.

   Fica por baixo do valor de face e mais discreta do que ele: a pergunta
   principal continua a ser "quanto é que ele recebe", e o país é o que decide
   se aquele cartão serve.
   -------------------------------------------------------------------------- */

.presente-valor__pais {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  opacity: .68;
}

/* ==========================================================================
   OS PAÍSES DENTRO DE UMA MARCA

   Um `<details>` por país, com o preço mais baixo escrito no `<summary>`.
   Sem JavaScript: o browser abre e fecha, o teclado abre e fecha, e o Ctrl+F
   abre para encontrar texto lá dentro.
   ========================================================================== */

.presentes-pais {
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: var(--raio, 10px);
  background: #fff;
  margin-bottom: .75rem;
  overflow: hidden;
}

.presentes-pais[open] {
  border-color: rgba(0, 0, 0, .3);
}

.presentes-pais__cabeca {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 1.35rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* O triângulo que o browser desenha sozinho sai: há uma seta desenhada. */
.presentes-pais__cabeca::-webkit-details-marker { display: none; }
.presentes-pais__cabeca::marker { content: ''; }

.presentes-pais__cabeca:hover {
  background: rgba(0, 0, 0, .03);
}

.presentes-pais__cabeca:focus-visible {
  outline: 3px solid var(--amarelo, #FFD400);
  outline-offset: -3px;
}

.presentes-pais__nome {
  font-size: 1.1rem;
  font-weight: 700;
}

/* O PREÇO ENCOSTA À DIREITA E FICA À VISTA COM O PAÍS FECHADO.
   Um país fechado que não diga quanto custa obriga a abrir os oito para
   comparar — que é esconder com outra roupa. */
.presentes-pais__desde {
  margin-left: auto;
  font-size: .92rem;
  opacity: .75;
  white-space: nowrap;
}

.presentes-pais__seta {
  flex: none;
  align-self: center;
  opacity: .5;
  transition: transform .18s ease;
}

.presentes-pais[open] .presentes-pais__seta {
  transform: rotate(180deg);
}

.presentes-pais__corpo {
  padding: 0 1.35rem 1.1rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

@media (max-width: 34rem) {
  .presentes-pais__cabeca {
    padding: .95rem 1rem;
    gap: .6rem;
  }

  .presentes-pais__corpo {
    padding: 0 1rem 1rem;
  }

  .presentes-pais__nome {
    font-size: 1rem;
  }
}