/* =====================================================================
   OS SEIS PLANOS DE HOSPEDAGEM NA PÁGINA INICIAL — 20/09/2026.

   AS CORES E AS MEDIDAS SÃO AS DA NOSSA PÁGINA DE PLANOS (ordem do
   dono: «de acordo com o nosso site»), lidas de lá e não escolhidas
   aqui: vermelho #d60037 (e #b30030 ao passar o rato), escuro #16202c,
   texto #1d2733, cinzento #6b7683, linha #e3e7ec, visto verde #30b47a,
   cartão de 14px de raio e botão de 8px. Assim, quem salta da página
   inicial para a página de planos não vê dois sítios diferentes.

   Três inteiros no meio e dois a espreitar (o 6.º à esquerda, o 4.º à
   direita), no mesmo carrossel infinito dos produtos: o comportamento
   vem do `home-produtos.js`, que procura `[data-hp-car]`, `.hp-trilho` e
   `.hp-seta` — aqui só se dá o tamanho e a roupa.
   ===================================================================== */
.hpl {
  --hpl-c: #d60037;        /* o vermelho da casa */
  --hpl-c-esc: #b30030;    /* o mesmo, ao passar o rato */
  --hpl-escuro: #16202c;   /* o cartão em destaque */
  --hpl-t: #1d2733;        /* texto */
  --hpl-cinz: #6b7683;     /* texto secundário */
  --hpl-l: #e3e7ec;        /* linhas e bordas */
  --hpl-ok: #30b47a;       /* o visto */
  background: #fff;
}
.hpl .hp-caixa { position: relative; }

/* ---- OS TRÊS SELOS, por baixo do subtítulo ----
   O modelo da HostGator põe aqui três promessas («reembolso em 30 dias»,
   «suporte 24/7», «cancele quando quiser»). As nossas são outras e estão
   escritas nas nossas páginas legais: 15 dias, 48 horas e 99,99%. Não se
   copia a promessa alheia — copia-se o sítio onde ela se diz. */
.hpl .hpl-selos {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
}
.hpl .hpl-selos li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 20px; color: var(--hpl-t); white-space: nowrap;
}
.hpl .hpl-selos svg { flex: 0 0 auto; color: var(--hpl-c); }

.hpl .hp-trilho {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 18px 2px 10px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.hpl .hp-trilho::-webkit-scrollbar { display: none; }
.hpl .hp-trilho.hp-mexe { scroll-snap-type: none; }
.hpl .hp-trilho:focus-visible { outline: 2px solid #d60037; outline-offset: 4px; }

/* TRÊS INTEIROS E DOIS A ESPREITAR: três cartões, três espaços de 16px e
   96px de sobra — 48 para cada lado. */
.hpl .hpl-cartao {
  flex: 0 0 calc((100% - 144px) / 3);
  scroll-snap-align: start;
  display: flex;
}
.hpl .hpl-caixa {
  display: flex; flex-direction: column; width: 100%;
  border: 1px solid var(--hpl-l); border-radius: 14px; background: #fff;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.hpl .hpl-cartao:hover .hpl-caixa {
  border-color: var(--hpl-c);
  box-shadow: 0 6px 20px rgba(214, 0, 55, .08);
  transform: translateY(-2px);
}

/* ---- O CARTÃO, na forma do modelo que o dono mostrou ----
   etiqueta, nome, para quem serve, preço grande, botão, a letra pequena
   do anual e só no fim a lista com vistos. O recomendado é escuro.
   O QUE NÃO SE COPIOU do modelo: o preço antigo riscado e a
   percentagem de desconto — aqui não há desconto nenhum (os ciclos
   multiplicam-se) e riscar um preço que nunca existiu é mentir. */
/* A BARRA DO RECOMENDADO ATRAVESSA O TOPO DO CARTÃO, como no modelo da
   HostGator. Nos outros cartões ela existe, vazia e transparente: é ela
   que põe os seis nomes, os seis preços e os seis botões à mesma altura
   — sem isso, o cartão do meio empurrava-se para baixo. */
.hpl .hpl-barra {
  margin: 0; padding: 11px 12px; text-align: center;
  background: var(--hpl-escuro); color: #fff;
  font: 700 12.5px/1 Ubuntu, arial, sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.hpl .hpl-barra-vazia { background: transparent; color: transparent; }

/* A PASTILHA DO DOMÍNIO GRÁTIS, no canto — é o que distingue os planos
   para lá dos números (o Pro dá-o a 2 anos, o Ultra já a 6 meses), e sai
   do WHMCS. O «i» diz que há explicação por baixo. */
.hpl .hpl-chip {
  position: relative; align-self: center; margin: 0 0 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; border-radius: 999px;
  border: 1px solid #bde8d3; background: #eefaf3; color: #1b6e4c;
  font-size: 12px; font-weight: 700; white-space: nowrap; cursor: help;
}
/* verde, e com um «+» à frente: no modelo da HostGator esta pastilha diz
   o que se GANHA além do plano, e não é mais uma etiqueta cinzenta */
.hpl .hpl-i-verde { background: #1b6e4c; }
.hpl .hpl-i {
  width: 15px; height: 15px; border-radius: 50%;
  background: #1b6e4c; color: #fff;
  font: 700 10px/15px Ubuntu, arial, sans-serif; text-align: center;
}
.hpl .hpl-mais .hpl-chip { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; }
.hpl .hpl-mais .hpl-i { background: #fff; color: var(--hpl-escuro); }

.hpl .hpl-caixa { position: relative; padding: 0; }
.hpl .hpl-corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 24px 26px; }

/* UM RITMO SÓ (dono, 20/09/2026: «estas margens desorientadas»): todos
   os elementos do cartão encostam ao mesmo eixo à esquerda e o intervalo
   entre eles é sempre 16px. As alturas mínimas são as MEDIDAS — uma
   linha para o nome, duas para o texto — e não um número escolhido à
   sorte; é o que põe os seis preços e os seis botões à mesma altura. */
/* UMA LINHA SÓ (dono, 20/09/2026: «as margens estão maiores»). A 22px o
   «Hospedagem Business Ultra» passava a duas linhas e obrigava a
   reservar 56px em todos os cartões — daí as folgas de 14px acima e
   abaixo dos nomes curtos. A 19px o mais comprido dos seis cabe numa
   linha, e a caixa volta a ser do tamanho do texto. */
.hpl .hpl-nome {
  margin: 0 0 12px; min-height: 26px; text-align: center;
  font-size: 19px; line-height: 26px; font-weight: 700; color: var(--hpl-t); text-transform: none;
}
.hpl .hpl-quem {
  margin: 0 0 16px; font-size: 14px; line-height: 21px; color: var(--hpl-cinz);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: 42px; text-align: center;
}
/* O PREÇO COMO O DONO DESENHOU (20/09/2026): os escudos enormes e, no
   canto superior direito, duas linhas miúdas — os cêntimos com a moeda
   em cima e o «/mês» por baixo. Antes estava tudo na mesma linha e o
   valor lia-se pior. */
/* as peças pequenas ficam CENTRADAS contra o número, não penduradas no
   topo (dono, 20/09/2026: «o preço centralizado») */
.hpl .hpl-preco { display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; margin: 0 0 16px; }
.hpl .hpl-moeda { font-size: 18px; font-weight: 700; color: var(--hpl-c); }
.hpl .hpl-valor { font-size: 42px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--hpl-c); }
.hpl .hpl-canto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.25; }
.hpl .hpl-cent { font-size: 14px; font-weight: 700; color: var(--hpl-t); }
.hpl .hpl-mes { font-size: 13.5px; color: var(--hpl-cinz); }

/* UM SÓ BOTÃO CHEIO — o do plano recomendado; os outros cinco são de
   contorno (modelo HostGator e Hostinger). Com seis botões vermelhos e
   iguais, a recomendação não se via: tudo gritava ao mesmo volume. */
.hpl .hpl-bt {
  display: block; text-align: center;
  padding: 12px 24px; border-radius: 8px;
  border: 1px solid var(--hpl-c); background: #fff; color: var(--hpl-c);
  font-size: 14.5px; font-weight: 700;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hpl .hpl-bt:hover, .hpl .hpl-bt:focus-visible {
  background: var(--hpl-c); border-color: var(--hpl-c); color: #fff; transform: translateY(-1px);
}
/* a letra pequena por baixo do botão, como no modelo: o que se paga por
   ano, dito por extenso */
.hpl .hpl-ano { margin: 10px 0 0; font-size: 12.5px; line-height: 18px; color: var(--hpl-cinz); min-height: 36px; text-align: center; }

.hpl .hpl-traços {
  list-style: none; margin: 20px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--hpl-l);
  display: flex; flex-direction: column; gap: 12px;
}
/* RÓTULO À ESQUERDA E VALOR À DIREITA: os seis planos têm os mesmos
   quatro traços e o que muda é o valor. Alinhados assim, comparam-se de
   relance — que é o trabalho desta secção. */
.hpl .hpl-traços li {
  position: relative;
  display: grid; grid-template-columns: 17px 1fr auto; align-items: baseline; gap: 10px;
  font-size: 14px; line-height: 21px; color: var(--hpl-cinz);
}
.hpl .hpl-traços .hpl-rot { min-width: 0; justify-self: start; }
.hpl .hpl-traços .hpl-val { color: var(--hpl-t); font-weight: 700; text-align: right; white-space: nowrap; }
/* o termo com explicação: sublinhado a pontos, como no modelo */
.hpl .hpl-tem-dica .hpl-rot { border-bottom: 1px dotted #b7c0cb; cursor: help; }
.hpl .hpl-tem-dica:focus { outline: none; }
.hpl .hpl-tem-dica:focus .hpl-rot { border-bottom-color: #d60037; }

/* O BALÃO DA EXPLICAÇÃO, como no modelo — e não o `title` do navegador,
   que demora um segundo a aparecer, não existe no telemóvel e não chega
   a quem anda de teclado. */
.hpl .hpl-chip::after, .hpl .hpl-tem-dica::after {
  content: attr(data-dica);
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 6;
  padding: 11px 13px; border-radius: 10px;
  background: var(--hpl-escuro); color: #fff;
  font-size: 12.5px; line-height: 18px; font-weight: 400; text-align: left; white-space: normal;
  box-shadow: 0 18px 36px -18px rgba(16, 23, 31, .8);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hpl .hpl-chip::before, .hpl .hpl-tem-dica::before {
  content: ''; position: absolute; left: 22px; bottom: calc(100% + 4px); z-index: 7;
  border: 6px solid transparent; border-top-color: var(--hpl-escuro);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
}
.hpl .hpl-tem-dica:hover::after, .hpl .hpl-tem-dica:focus::after,
.hpl .hpl-tem-dica:hover::before, .hpl .hpl-tem-dica:focus::before,
.hpl .hpl-chip:hover::after, .hpl .hpl-chip:focus::after,
.hpl .hpl-chip:hover::before, .hpl .hpl-chip:focus::before {
  opacity: 1; visibility: visible; transform: none;
}
/* a pastilha passou para a esquerda: o balão ancora-se aí */
.hpl .hpl-chip::after { left: 0; right: auto; width: 230px; }
.hpl .hpl-chip::before { left: 22px; right: auto; }
.hpl .hpl-chip:focus { outline: none; }
/* no cartão escuro o balão inverte-se, senão não se lê */
.hpl .hpl-mais .hpl-tem-dica::after, .hpl .hpl-mais .hpl-chip::after { background: #fff; color: #1f2835; }
.hpl .hpl-mais .hpl-tem-dica::before, .hpl .hpl-mais .hpl-chip::before { border-top-color: #fff; }
.hpl .hpl-v {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%;
  background: var(--hpl-ok);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 15px 15px no-repeat;
}

/* ---- «VER TODOS OS DETALHES»: o que é igual em todos os planos abre
       com um clique, para o cartão mostrar primeiro o que os distingue ---- */
/* CENTRADO e no FIM (dono, 20/09/2026): fechado fica logo por baixo da
   lista; aberto, os detalhes empurram-no para o fundo do cartão e ele
   passa a dizer «Esconder os detalhes». É a ordem do documento que o
   move — não há JavaScript nenhum a mexer-lhe. */
.hpl .hpl-abrir {
  margin: 16px auto 0; padding: 10px 0 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; align-self: center;
  border: 0; border-top: 0; background: none; cursor: pointer;
  color: var(--hpl-t); font: 700 13.5px/1.2 Ubuntu, arial, sans-serif;
}
.hpl .hpl-abrir svg { transition: transform .25s ease; }
.hpl .hpl-abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.hpl .hpl-abrir:hover, .hpl .hpl-abrir:focus-visible { color: var(--hpl-c); outline: none; }
.hpl .hpl-abrir:focus-visible span { text-decoration: underline; }
.hpl .hpl-mais .hpl-abrir { color: #fff; }
.hpl .hpl-mais .hpl-abrir:hover, .hpl .hpl-mais .hpl-abrir:focus-visible { color: #ff7ea0; }

.hpl .hpl-detalhes { overflow: hidden; }
/* abre com altura animada, sem saltos: a grelha de 0fr para 1fr é o
   truque que dá altura automática com transição */
/* A MESMA ANIMAÇÃO DA PÁGINA DE PLANOS (dono: «a animação igual a lá»):
   o mesmo cubic-bezier(.2,.8,.2,1) e os mesmos .42s da faixa fixa de lá,
   com o conteúdo a descer e a aparecer, em vez do «ease» genérico. */
/* ALTURA MEDIDA, NÃO `grid-template-rows: 0fr/1fr`.
   O truque do `fr` servia enquanto a lista tinha quatro linhas; com as 27
   de agora RUÍA — medido: o conteúdo tinha 1015px de `scrollHeight` e o
   `1fr` resolvia para 12px, que é só o `padding` da lista. O `fr` dimensiona
   contra a caixa da grelha, e com `min-height: 0` no filho não havia nada
   que a empurrasse. Agora o guião mede e escreve a altura, e no fim solta-a
   para `auto` — assim a lista pode crescer se o texto quebrar noutra linha.
   O `overflow` também passa a `visible` depois de abrir: sem isso os balões
   das explicações das linhas de dentro ficavam cortados pela caixa. */
.hpl .hpl-detalhes { overflow: hidden; height: 0; transition: height .42s cubic-bezier(.2, .8, .2, 1); }
.hpl .hpl-detalhes[hidden] { display: none; }
.hpl .hpl-detalhes > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .42s cubic-bezier(.2, .8, .2, 1);
}
.hpl .hpl-detalhes.hpl-aberto > * { opacity: 1; transform: none; }
.hpl .hpl-detalhes.hpl-solto { overflow: visible; height: auto; }
.hpl .hpl-tambem {
  margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hpl-l);
  font-size: 13px; font-weight: 700; color: var(--hpl-t);
}
.hpl .hpl-mais .hpl-tambem { color: #fff; border-top-color: rgba(255, 255, 255, .16); }
.hpl .hpl-traços-2 { margin-top: 12px; padding-top: 0; border-top: 0; }
/* a segunda leva do que abre com o clique encosta à primeira */
.hpl .hpl-traços-3 { margin-top: 0; padding-top: 12px; }

/* ---- O RECOMENDADO: escuro, como no modelo ---- */
.hpl .hpl-mais .hpl-caixa {
  border-color: var(--hpl-escuro);
  background: var(--hpl-escuro);
  box-shadow: 0 14px 34px rgba(22, 32, 44, .28);
}
.hpl .hpl-mais .hpl-nome,
.hpl .hpl-mais .hpl-valor,
.hpl .hpl-mais .hpl-cent,
.hpl .hpl-mais .hpl-traços .hpl-val { color: #fff; }
.hpl .hpl-mais .hpl-quem,
.hpl .hpl-mais .hpl-mes,
.hpl .hpl-mais .hpl-ano,
.hpl .hpl-mais .hpl-traços li { color: #b9c6d3; }
.hpl .hpl-mais .hpl-traços { border-top-color: rgba(255, 255, 255, .16); }
.hpl .hpl-mais .hpl-tem-dica .hpl-rot { border-bottom-color: rgba(255, 255, 255, .45); }
.hpl .hpl-mais .hpl-bt { background: var(--hpl-c); border-color: var(--hpl-c); color: #fff; }
.hpl .hpl-mais .hpl-bt:hover, .hpl .hpl-mais .hpl-bt:focus-visible { background: var(--hpl-c-esc); border-color: var(--hpl-c-esc); }

/* o véu de cada lado, do transparente ao fundo da secção */
.hpl .hp-caixa::before, .hpl .hp-caixa::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 2;
}
.hpl .hp-caixa::after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%); }
.hpl .hp-caixa::before { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); }

.hpl .hp-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--hpl-escuro); border-radius: 999px;
  background: var(--hpl-escuro); color: #fff; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(31, 40, 53, .45);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hpl .hp-seta:hover, .hpl .hp-seta:focus-visible {
  background: var(--hpl-c); border-color: var(--hpl-c); color: #fff; outline: none;
}
.hpl .hp-seta-ant { left: -22px; }
.hpl .hp-seta-seg { right: -22px; }

.hpl .hpl-todos { margin: 10px 0 0; text-align: center; }
/* o caminho para a comparação completa é uma saída a sério, não um
   sublinhado tímido: botão secundário, com a mesma medida do primário */
.hpl .hpl-todos a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px; border-radius: 8px;
  border: 1px solid var(--hpl-escuro); background: var(--hpl-escuro);
  color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 20px -10px rgba(22, 32, 44, .55);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hpl .hpl-todos a::after {
  content: ''; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px 16px no-repeat;
  transition: transform .2s ease;
}
.hpl .hpl-todos a:hover, .hpl .hpl-todos a:focus-visible {
  background: var(--hpl-c); border-color: var(--hpl-c); color: #fff;
  transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(214, 0, 55, .6);
}
.hpl .hpl-todos a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .hpl .hpl-todos a:hover { transform: none; }
  .hpl .hpl-todos a:hover::after { transform: none; }
}

/* ---- dois no meio no tablet, um no telemóvel ---- */
@media only screen and (max-width: 991px) {
  .hpl .hpl-cartao { flex-basis: calc((100% - 96px) / 2); }
  .hpl .hp-seta-ant { left: 2px; }
  .hpl .hp-seta-seg { right: 2px; }
}
@media only screen and (max-width: 767px) {
  .hpl .hpl-cartao { flex-basis: 84%; }
  .hpl .hp-caixa::before, .hpl .hp-caixa::after { width: 28px; }
}

/* MOVIMENTO REDUZIDO: fica tudo, mais calmo — regra da casa. */
@media (prefers-reduced-motion: reduce) {
  .hpl .hpl-cartao:hover .hpl-caixa { transform: none; }
  .hpl .hpl-bt:hover { transform: none; }
  /* os detalhes continuam a abrir animados — regra da casa: mais calmo,
     nunca desligado; é a mesma escolha da página de planos */
  .hpl .hpl-detalhes { transition: height .22s linear; }
  .hpl .hpl-detalhes > * { transform: none; transition: opacity .2s linear; }
}

/* =====================================================================
   A CABEÇA FIXA DOS PLANOS — dono, 20/09/2026: «os detalhes do plano
   fixo sticky igual a lá». É o mesmo mecanismo da página de planos
   (`.pl-fixa`), portado, e pela mesma razão: NÃO SE PODE usar
   `position: sticky` nos cartões, porque eles vivem dentro da fila que
   rola de lado e um elemento com `overflow` passa a ser o contentor do
   sticky — ficava preso à fila, não à página, e nunca se colava.

   Por isso é uma faixa à parte, `fixed`, que o guião monta a partir dos
   cartões e alinha célula a célula com a fila. Aqui mostra o NOME e o
   PREÇO (na página de planos mostra o «para quem»): ao abrir os
   detalhes é o preço que sai do ecrã, e é ele que faz falta.
   É repetição do que está nos cartões — fica escondida dos leitores.
   ===================================================================== */
.hpl-fixa { position: fixed; z-index: 19; overflow: hidden; pointer-events: none;
  visibility: hidden; transition: visibility 0s linear .32s; }
.hpl-fixa.hpl-fixa-on { visibility: visible; transition-delay: 0s; }
.hpl-fixa-cel { position: absolute; top: 0; box-sizing: border-box; padding: 11px 22px;
  background: #fff; border: 1px solid #e3e7ec; border-top: 0; border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 22px rgba(22, 32, 44, .10); font-family: inherit;
  display: flex; align-items: baseline; gap: 8px;
  transform: translateY(-105%); opacity: 0;
  transition: transform .32s cubic-bezier(.55, 0, .8, .2), opacity .24s ease; }
.hpl-fixa-on .hpl-fixa-cel { transform: translateY(0); opacity: 1;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.hpl-fixa-cel b { color: #1d2733; font-size: 16px; line-height: 24px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpl-fixa-cel i { margin-left: auto; color: #d60037; font-size: 15px; font-weight: 700;
  font-style: normal; white-space: nowrap; }
.hpl-fixa-cel.hpl-fixa-dest { background: #16202c; border-color: #16202c; }
.hpl-fixa-cel.hpl-fixa-dest b { color: #fff; }
.hpl-fixa-cel.hpl-fixa-dest i { color: #ff7ea0; }
@media (max-width: 600px) {
  .hpl-fixa-cel { padding: 9px 14px; gap: 6px; }
  .hpl-fixa-cel i { font-size: 13.5px; }
}
/* com «movimento reduzido» anima na mesma, mais curta e em linha recta —
   a mesma escolha da página de planos */
@media (prefers-reduced-motion: reduce) {
  .hpl-fixa { transition-delay: .2s; }
  .hpl-fixa-cel, .hpl-fixa-on .hpl-fixa-cel { transition: transform .2s linear, opacity .2s linear;
    transition-delay: 0s !important; }
}

/* ---- O INÍCIO DO BLOCO (dono, 20/09/2026: «o início do bloco está
       desorganizado») ---- O título, o sinal da casa, o subtítulo e os
   selos herdavam margens de sítios diferentes (19px, 20px, 14px, e um
   `margin-bottom` do tema). Passam a ter um intervalo só, e os selos
   ganham mais ar, porque são de outra natureza: são promessas, não
   texto corrido. */
.hpl .section-title h2 { margin-bottom: 16px; }
.hpl .section-title .section-mozout { display: block; margin: 0 auto 16px; }
/* NÃO se mexe na largura do subtítulo: o tema dá-lha, e ao pôr aqui um
   `max-width` ele passou de 2 para 4 linhas (medido). Só a margem. */
.hpl .section-title p { margin-top: 0; margin-bottom: 0; }
.hpl .hpl-selos { margin-top: 22px; }

/* A FITA DO «MAIS ESCOLHIDO» COM FUNDO PRÓPRIO (dono, 20/09/2026: «deve
   chamar atenção ... o texto deve ter outro fundo»). Era do mesmo escuro
   do cartão e desaparecia dentro dele; a vermelho da casa salta. */
.hpl .hpl-mais .hpl-barra { background: var(--hpl-c); color: #fff; }

/* O TOPO DO CARTÃO AO CENTRO (dono): nome, pastilha, texto e preço no
   eixo do meio. A lista de traços fica alinhada, porque ali o que
   interessa é comparar rótulo à esquerda e valor à direita. */