/* =============================================================
   O GUIA DE INSTALAÇÃO EM IMAGENS
   =============================================================

   Cinco ecrãs desenhados, lado a lado num ecrã grande e uns por
   baixo dos outros num telemóvel.

   A DECISÃO QUE MANDA NESTA FOLHA: isto não é uma imagem, é
   desenho vectorial dentro do HTML. Por isso o texto herda a
   tipografia do site, traduz-se com o resto, e não há um único
   pedido de rede a mais — o guia chega junto com a página.

   Um concorrente põe aqui um PNG de meio mega com capturas de
   ecrã em inglês. O cliente que mais precisa deste guia é o que
   está numa rede fraca e o que não lê inglês.
   ============================================================= */

.guia {
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* --- o cabeçalho: a faixa amarela com o sistema --- */

.guia__cabeca {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.15rem;
  background: var(--amarelo);
  border-bottom: 1px solid var(--linha-forte);
}

.guia__marca {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: var(--tinta);
}

.guia__marca svg { width: 100%; height: 100%; }

.guia__titulo {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
}

/* --- o aviso: o que tem de estar em ordem antes de começar --- */

.guia__aviso {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  padding: .9rem 1.15rem;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linha);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.guia__aviso-icone {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .12rem;
  flex: 0 0 auto;
  color: var(--tinta);
}

.guia__aviso-icone svg { width: 100%; height: 100%; }

/* --- os cinco passos --- */

.guia__passos {
  display: grid;
  /* `start` e não `stretch`: cada passo cresce o que o seu desenho
     precisar. Esticados todos à altura do mais alto, os curtos
     ficavam com um buraco por baixo. */
  align-items: start;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--linha);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .guia__passos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .guia__passos { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .guia__passos { grid-template-columns: repeat(5, 1fr); }
}

.guia__passo {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.15rem 1rem 1.35rem;
  background: var(--branco);
}

.guia__passo-texto {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--tinta);
}

.guia__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  border-radius: var(--rmax);
  background: var(--tinta);
  color: var(--tinta-inv);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
}

/* --- o telemóvel desenhado --- */

.guia__ecra {
  display: block;
  margin-top: auto;
  text-align: center;
}

.ecra {
  width: 100%;
  max-width: 172px;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(18, 18, 18, .07));
}

/* O texto DENTRO do desenho. Os tamanhos estão em unidades do
   viewBox (172 de largura), não em pixéis do ecrã: é o que faz o
   desenho encolher inteiro em vez de o texto sair da caixa. */

.ecra__topo,
.ecra__et,
.ecra__v {
  font-family: var(--sans);
}

.ecra__topo { font-size: 11px; font-weight: 600; fill: var(--tinta); }
.ecra__et   { font-size: 10.5px; font-weight: 500; fill: var(--tinta); }
.ecra__v    { font-size: 9px; font-weight: 400; fill: var(--tinta-3); }

.ecra__topo--noite { fill: var(--tinta-inv); }
.ecra__et--noite   { fill: var(--tinta-inv); }
.ecra__v--noite    { fill: var(--noite-texto); }

/* --- a nota do fim --- */

.guia__nota {
  margin: 0;
  padding: .9rem 1.15rem;
  border-top: 1px solid var(--linha);
  background: var(--amarelo-vidro);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* Dois guias seguidos — iPhone e Android — respiram um do outro. */
.guia + .guia { margin-top: 1.5rem; }

@media print {
  .guia { break-inside: avoid; box-shadow: none; }
  .guia__passos { grid-template-columns: repeat(5, 1fr); }
}