/* =====================================================================
   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; }

.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: flex-end; margin: 0 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; border-radius: 999px;
  border: 1px solid var(--hpl-l); background: #f4f6f8; color: var(--hpl-t);
  font-size: 12px; font-weight: 700; white-space: nowrap; cursor: help;
}
.hpl .hpl-i {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--hpl-cinz); 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; }

.hpl .hpl-nome { margin: 0 0 10px; min-height: 56px; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--hpl-t); text-transform: none; }
.hpl .hpl-quem {
  margin: 0 0 20px; font-size: 14px; line-height: 21px; color: var(--hpl-cinz);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; min-height: 63px;
}
.hpl .hpl-preco { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; margin: 0 0 18px; }
.hpl .hpl-valor { font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--hpl-c); }
.hpl .hpl-mes { font-size: 15px; color: var(--hpl-cinz); }

.hpl .hpl-bt {
  display: block; text-align: center;
  padding: 13px 24px; border-radius: 8px;
  border: 0; background: var(--hpl-c); color: #fff;
  font-size: 14.5px; font-weight: 700;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hpl .hpl-bt:hover, .hpl .hpl-bt:focus-visible {
  background: var(--hpl-c-esc); 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: 12px 0 0; font-size: 12.5px; line-height: 18px; color: var(--hpl-cinz); }

.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 está no canto direito: o balão dela não pode sair do cartão */
.hpl .hpl-chip::after { left: auto; right: 0; width: 230px; }
.hpl .hpl-chip::before { left: auto; right: 22px; }
.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 ---- */
.hpl .hpl-abrir {
  margin: 16px 0 0; padding: 10px 0 0;
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  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 */
.hpl .hpl-detalhes { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.hpl .hpl-detalhes[hidden] { display: none; }
.hpl .hpl-detalhes > * { min-height: 0; }
.hpl .hpl-detalhes.hpl-aberto { grid-template-rows: 1fr; }
.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; }

/* ---- 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-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); color: #fff; }
.hpl .hpl-mais .hpl-bt:hover, .hpl .hpl-mais .hpl-bt:focus-visible { background: 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-block; padding: 12px 24px; border-radius: 8px;
  border: 1px solid var(--hpl-l); background: #fff;
  color: var(--hpl-t); font-size: 14.5px; font-weight: 700;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.hpl .hpl-todos a:hover, .hpl .hpl-todos a:focus-visible {
  color: var(--hpl-c); border-color: var(--hpl-c); background: #fff;
}

/* ---- 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; }
}