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

   =========================================================================
   O PACOTE COM CHAMADAS NAO E UM PACOTE DE DADOS MAIS CARO. E OUTRO
   PRODUTO, E AQUI GANHA OUTRA CARA.

   O dono procurou tres vezes o "pacote de voz+sms+dados" numa pagina onde
   tres dos quatro cartoes o sao, e nao deu com eles. A linha da voz ja la
   estava — o defeito nao era falta de texto, era falta de FORMA.

   Numa grelha le-se a silhueta antes do texto. Quatro rectangulos com a
   mesma moldura, a mesma ordem e o mesmo peso leem-se como quatro do mesmo,
   e quem procura outra coisa passa por cima sem parar. Uma pastilha pequena
   a meio de um cartao igual aos vizinhos nao muda a silhueta nenhuma: para
   se dar por ela e preciso ja se estar a ler o cartao, e ninguem le trinta
   e seis cartoes.

   Por isso a distincao subiu da linha para a MOLDURA:

     FAIXA AMARELA a toda a largura, colada ao topo, antes do volume e do
     preco. Le-se de longe, sem ler nada — que e o unico sitio onde este
     produto tem hipotese de ser encontrado.

     A LINHA DO PORQUE por baixo do preco, pequena e a tinta secundaria.
     Nao compete com nada; esta la para quem ja parou.

   COR: a faixa e amarelo COMO SUPERFICIE, com a tinta escura por cima —
   13,1:1, e a regra da casa cumprida (o amarelo nunca e cor de texto). E
   tambem o unico amarelo forte da grelha, e por isso e que resulta: se
   todos os cartoes tivessem um, nenhum se via.

   E A COR NAO E A UNICA MARCA. A faixa leva icone e o produto escrito por
   extenso; quem nao distingue as cores le "Dados + chamadas + SMS" na mesma,
   e um leitor de ecra le a faixa primeiro porque ela vem primeiro no HTML.

   CUSTO EM ALTURA: uma linha. A pastilha preta que ali estava virou faixa e
   nao ocupa espaco novo; a unica coisa acrescentada e a frase do porque. O
   cartao continua compacto, que foi o pedido anterior do dono e nao caducou.
   ========================================================================= */

/* O espaco interior do cartao passa a ter nome. A faixa precisa de sair fora
   dele — margem negativa exactamente igual ao padding — e um numero repetido
   a mao em dois sitios deixa de bater certo no dia em que um deles mudar.
   O valor e o mesmo que a estilo.css ja usava. */
.pacote--compacto {
  --cartao-espaco: clamp(14px, 1.8vw, 18px);
  padding: var(--cartao-espaco);
}

/* -------------------------------------------------------------------------
   A FAIXA DO PRODUTO
   ------------------------------------------------------------------------- */

/* Especificidade a mais de proposito (.pacote.pacote--voz): a estilo.css tem
   uma regra `.pacote--compacto .pacote__voz` a por isto pequeno e redondo, e
   esta tem de ganhar independentemente da ordem em que as folhas carreguem. */
.pacote.pacote--voz .pacote__voz {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: stretch;

  /* Sai do padding do cartao pelos tres lados de cima e cola-se a moldura. */
  margin: calc(var(--cartao-espaco) * -1) calc(var(--cartao-espaco) * -1) 1px;
  padding: 10px var(--cartao-espaco) 11px;

  background: var(--amarelo);
  color: var(--tinta);
  /* Menos 1px do que o raio do cartao: por dentro da moldura, o arco e mais
     apertado. Com o mesmo valor via-se uma meia-lua clara nos cantos. */
  border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0;

  font-size: .84rem;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.3;
}

.pacote.pacote--voz .pacote__voz svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   A LINHA DO PORQUE
   ------------------------------------------------------------------------- */

/* Vem logo a seguir ao preco, que e onde a pergunta nasce. Pequena e a tinta
   secundaria: o trabalho dela e responder, nao chamar. */
.pacote--voz .pacote__voz-nota {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* -------------------------------------------------------------------------
   A FITA, QUE ERA AMARELA SOBRE AMARELO
   ------------------------------------------------------------------------- */

/* "Mais barato" e uma pastilha amarela pousada na moldura do cartao. Sobre a
   faixa amarela desaparecia. Nestes cartoes passa a branca com fio escuro —
   continua a ser um objecto pousado na moldura, e le-se.

   A fita de "recomendado" fica de fora: e tinta escura cheia, e sobre
   amarelo da 13,1:1. Nao ha nada a corrigir nela. */
.pacote--voz .pacote__fita:not(.pacote__fita--recomendado) {
  background: var(--branco);
  color: var(--tinta);
  border: 1px solid var(--tinta);
  box-shadow: var(--sombra-1);
}

/* -------------------------------------------------------------------------
   O CARTAO INTEIRO
   ------------------------------------------------------------------------- */

/* Um fio um pouco mais firme a toda a volta. A faixa ja faz o trabalho de
   destacar; isto so evita que o corpo do cartao pareca solto por baixo dela.
   Nao se mexe na cor da moldura quando o cartao tambem e o recomendado ou o
   mais barato — essas regras tem sentido proprio e ganham por virem depois. */
.pacote--voz {
  border-color: var(--linha-forte);
}

/* Ecra estreito: a faixa pode quebrar em duas linhas e o icone tem de ficar
   colado a primeira, nao centrado no bloco todo. */
@media (max-width: 420px) {
  .pacote.pacote--voz .pacote__voz {
    align-items: flex-start;
  }
  .pacote.pacote--voz .pacote__voz svg {
    margin-top: 2px;
  }
}

/* =========================================================================
   O PLANO DE UM DIA. UM PRECO POR DIA NAO PODE TER A CARA DE UM PRECO DE
   PACOTE.

   46% da prateleira dura um dia, e nao sao pacotes de um dia: sao PRECOS POR
   DIA. Na mesma escada dos de 7, 15 e 30 dias ganhavam sempre — sao o numero
   mais baixo — e quem vai dez dias comparava um dia com um mes. O cartao ja
   dizia "1 dia" e nao chegava: numa grelha le-se o preco e o volume, e a
   duracao passa ao lado.

   TRES PECAS, E NENHUMA DELAS E COR SOZINHA:

     A FAIXA no topo, colada a moldura como a da voz. Diz "preco por dia" e
     "vale 24 horas" por extenso, com um relogio. E a silhueta que muda, e a
     silhueta le-se antes do texto.

     O "POR DIA" AGARRADO AO NUMERO. Esta e a peca que carrega tudo: na
     grelha compacta o rotulo "Preco" esta escondido para leitores de ecra
     (estilo.css), por isso um "por dia" posto ali nao se via. Vai debaixo do
     valor, na mesma coluna, e nao se separa dele.

     A CONTA DA VIAGEM, quando o cliente ja disse quantos dias vai. E a linha
     que desarma a comparacao — "os seus 10 dias dariam 30.000 Kz" ao lado de
     um pacote de 30 dias a 13.000.

   A COR NAO E A DA VOZ, E ISSO E DELIBERADO. O amarelo forte e o unico da
   grelha e e o que faz a faixa da voz funcionar; um segundo amarelo tirava
   valor aos dois. Aqui a superficie e o papel escuro da casa com um fio
   grosso por baixo — le-se como um letreiro e nao como um alerta, porque
   isto nao e um aviso: e um produto que serve quem faz escala de 24 horas.

   E NAO ESTRAGA AS FITAS. As tres fitas ("Mais barato" amarela,
   "recomendado" a tinta cheia, "degrau" branca) pousam na moldura por cima
   desta faixa. Sobre o papel escuro leem-se as tres — foi por isso que a
   faixa nao ficou preta, que era a escolha obvia e obrigava a corrigir a
   fita do recomendado.
   ========================================================================= */

.pacote.pacote--diario .pacote__diario {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: stretch;

  /* Sai do padding do cartao pelos tres lados de cima, como a da voz. */
  margin: calc(var(--cartao-espaco) * -1) calc(var(--cartao-espaco) * -1) 1px;
  padding: 9px var(--cartao-espaco) 8px;

  background: var(--papel-2);
  color: var(--tinta);
  border-bottom: 2px solid var(--tinta);
  border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0;

  font-size: .82rem;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.3;
}

.pacote.pacote--diario .pacote__diario svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Um cartao que seja as duas coisas — chamadas E vendido ao dia — leva as
   duas faixas. A de cima fica com o arco da moldura; a de baixo e recta e
   nao volta a sair do padding pelo topo, senao encavalitavam-se. */
.pacote--voz.pacote--diario .pacote__diario {
  margin-top: 0;
  border-radius: 0;
}

/* -------------------------------------------------------------------------
   O "POR DIA", COLADO AO NUMERO
   ------------------------------------------------------------------------- */

/* A coluna do preco alinha a direita (.pacote__preco), por isso isto cai
   debaixo do valor e encostado a ele. Peso a mais de proposito: e a palavra
   que muda o significado do numero e nao pode passar por legenda. */
.pacote--diario .pacote__por-dia {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-2);
  line-height: 1;
  margin-top: 1px;
}

/* -------------------------------------------------------------------------
   A FATIA NA CARA DO CARTAO
   ------------------------------------------------------------------------- */

/* Tres diarios do mesmo destino dizem todos "Dados ilimitados / Vale 24
   horas". O que os separa e a fatia rapida — 1 GB por dia contra 10 — e
   estava dentro do dobro. Sobe para a cara, pequena mas a tinta cheia: e a
   unica coisa que explica a diferenca de preco entre cartoes vizinhos. */
.pacote--diario .pacote__fatia-cara {
  margin: 3px 0 0;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-2);
}

/* -------------------------------------------------------------------------
   A CONTA DA VIAGEM
   ------------------------------------------------------------------------- */

/* Nao e um alerta e nao usa a cor de alerta: o veredicto do ajudante ja diz,
   em vermelho e por extenso, que o pacote dura menos dias do que a viagem.
   Esta linha faz outra coisa — poe o preco na mesma escala do cartao do
   lado — e por isso e uma caixa sobria com fio a volta. */
.pacote--diario .pacote__viagem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r1);
  background: var(--branco);
  font-size: .79rem;
  line-height: 1.45;
  color: var(--tinta);
}

.pacote--diario .pacote__viagem svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: .6;
}

/* Ecra estreito: a faixa quebra em duas linhas e o icone cola-se a primeira. */
@media (max-width: 420px) {
  .pacote.pacote--diario .pacote__diario {
    align-items: flex-start;
  }
  .pacote.pacote--diario .pacote__diario svg {
    margin-top: 2px;
  }
}

/* A COBERTURA NA CARA DO CARTAO.

   A conta — "Vale em 31 paises" — le-se sem abrir nada, porque numa pagina
   de continente e o facto que decide a compra: "Europa" tanto pode ser sete
   paises como quarenta e um. A lista fica no seu proprio dobro. */
.cobertura { display: grid; gap: 5px; font-size: .82rem; }

.cobertura__conta {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-weight: 600;
}

.cobertura__inclui {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .76rem; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: var(--tinta); color: var(--branco);
}
.cobertura__inclui svg { width: 12px; height: 12px; }

.cobertura__dobra > summary {
  cursor: pointer; list-style: none;
  color: var(--tinta-suave); font-size: .78rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.cobertura__dobra > summary::-webkit-details-marker { display: none; }

.cobertura__lista {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  font-size: .78rem; color: var(--tinta-media);
}

/* O pais por onde o cliente entrou. A cor NAO e a unica marca: leva peso e
   um ponto, para quem nao distingue cores. */
.cobertura__actual { font-weight: 700; color: var(--tinta); }
.cobertura__actual::before { content: '\2022\00a0'; }

/* A FAIXA DO eSIM INTERNACIONAL.

   Terceira faixa deste cartao, e a terceira vez que o problema e o mesmo:
   numa grelha le-se a silhueta antes do texto, e um pacote que atravessa
   fronteiras tinha a mesma cara de um que serve so aquele pais.

   NAO E AMARELA. O amarelo forte e da voz, e duas superficies amarelas
   apagam-se uma a outra. Esta e tinta clara com fio: ve-se como outra coisa
   sem disputar o lugar. */
.pacote__internacional {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 2px;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta);
  background: var(--fundo-2, #F4F1EA);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 3px 10px;
  align-self: flex-start;
}
.pacote__internacional svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .75; }

/* OS CARTOES ESTICAM ATE AO FIM DA LINHA.

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

   A grelha tinha `align-items: start` e os cartoes ficavam com a altura do
   seu proprio conteudo. Um cartao internacional leva a conta dos paises e a
   gaveta da lista — 329px; um cartao simples tem 183. A linha da grelha fica
   com a altura do mais alto, e por baixo do mais baixo sobravam 146px 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. */
.pacotes__grelha { align-items: stretch; }

/* =============================================================
   O CAMPO DOS DIAS, E O TOTAL QUE ELE PRODUZ
   =============================================================

   O dono escreveu seis no campo e o preco continuou a dizer
   2.000 Kz — o preco de um dia. Disse-o duas vezes.

   Metade do defeito era nao haver JavaScript nenhum a fazer a
   conta (esta agora em public/js/dias.js). A outra metade era
   esta: o campo nao tinha uma linha de estilo. Aparecia cru no
   meio de um cartao desenhado, e um campo que parece um engano
   nao convida ninguem a escrever la nada.
   ============================================================= */

.pacote__dias {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: auto;
}

.pacote__dias-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .45rem .55rem .45rem .7rem;
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  background: var(--papel);
  font-size: .88rem;
  font-weight: 500;
  color: var(--tinta);
}

.pacote__dias-campo:focus-within {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px var(--amarelo-luz);
}

.pacote__dias-campo input {
  width: 4.2rem;
  padding: .3rem .45rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r1);
  background: var(--branco);
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  color: var(--tinta);
}

.pacote__dias-campo input:focus { outline: none; }

/* O TOTAL.

   E um <output> e nao um <input>: os `output` nao sao submetidos,
   por isso continua a nao viajar dinheiro nenhum no formulario.
   O numero e para os olhos; quem faz a conta que vale e o
   servidor, com o catalogo dele. */
.pacote__dias-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .1rem .2rem;
}

.pacote__dias-total-rotulo {
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinta-3);
}

.pacote__dias-total .mono {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

/* =============================================================
   ABRIR UM DETALHE NAO PODE ESTICAR OS CARTOES DO LADO
   =============================================================

   Defeito do dono: "porque que quando abro os detalhes de um
   numero todos os outros tambem abrem assim?, conserta ai".

   Nao era o `details` a abrir sozinho: era o `align-items:
   stretch` logo acima, que poe todos os cartoes com a altura do
   mais alto da linha. Fechado esta certo — os botoes alinham-se e
   nao ha o buraco que ele tinha apanhado antes ("porque esse
   espaco? entre os planos 500 MB e 10GB"). Aberto um, a linha
   cresce e os outros crescem com ela, cheios de nada por baixo do
   botao.

   As duas queixas sao verdadeiras e batem-se de frente. `:has()`
   resolve-as sem escolher: enquanto estiver tudo fechado os
   cartoes alinham-se; a partir do momento em que um abre, cada um
   passa a ter a altura do que tem dentro.

   Num browser sem `:has()` fica o que ja la estava, que e o
   comportamento de hoje — nao piora nada. */
.pacotes__grelha:has(details[open]) { align-items: start; }