/* =====================================================================
   CARROSSEL DOS PRODUTOS DA PÁGINA INICIAL — 20/09/2026.

   O tema põe os cartões a flutuar (`float: left; width: 33.33%`), o que
   dá três por linha e o resto a cair para baixo. Aqui, e só onde a
   secção traz a classe `hp-car`, eles passam a viver num trilho que
   anda de lado, com quatro à vista no computador, dois no tablet e um
   no telemóvel.
   ===================================================================== */
.home-main-products.hp-car .main-products {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 4px 2px 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 42px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.home-main-products.hp-car .main-products::-webkit-scrollbar { display: none; }
/* enquanto a seta anda, o encaixe desliga-se: senão puxa a meio do caminho */
.home-main-products.hp-car .main-products.hp-mexe { scroll-snap-type: none; }
.home-main-products.hp-car .main-products:focus-visible { outline: 2px solid #d60037; outline-offset: 4px; }

.home-main-products.hp-car .main-product {
  float: none;
  display: block;
  flex: 0 0 calc((100% - 92px) / 4);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
/* o cartão inteiro com a mesma altura, venha o texto que vier */
.home-main-products.hp-car .main-product > a,
.home-main-products.hp-car .main-product .box-home { height: 100%; }
.home-main-products.hp-car .box-home { display: flex; flex-direction: column; }
.home-main-products.hp-car .box-home-content { display: flex; flex-direction: column; flex: 1 1 auto; }
/* A DESCRIÇÃO EM TRÊS LINHAS CERTAS. O tema dá-lhe `display: table` e
   `height: 60px` com o transbordo à vista — por isso aparecia meia quarta
   linha cortada ao meio. Aqui a caixa volta a ser um bloco (é o que
   deixa o parágrafo ser um `-webkit-box` e o corte funcionar) e as três
   linhas ficam com a mesma altura em todos os cartões. */
.home-main-products.hp-car .main-product-desc {
  display: block; height: auto; min-height: 60px; overflow: hidden;
}
.home-main-products.hp-car .main-product-desc p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; min-height: 54px;
}
.home-main-products.hp-car .main-product-info { margin-top: auto; }

/* O ÍCONE do produto: o tema pinta-lhe o fundo por uma classe própria de
   cada produto antigo («cloud», «hospedagem-vps»…), e os cartões novos
   — domínios e certificados — saíam com o desenho solto por cima da
   fotografia. Aqui ficam todos iguais: bolha branca, desenho da marca. */
.home-main-products.hp-car .box-home-img-wrap { position: relative; }
.home-main-products.hp-car .main-product-icon {
  width: 66px; height: 66px; bottom: -33px;
  background: #fff; box-shadow: 0 12px 26px -14px rgba(31, 40, 53, .6);
}
.home-main-products.hp-car .main-product-icon:before {
  line-height: 66px; padding-top: 0; font-size: 30px; color: #d60037;
}
.home-main-products.hp-car .box-home-content { padding-top: 20px; }

/* AO PASSAR O RATO no cartão (dono, 20/09/2026): o «Conheça» fica azul e a
   bolha do ícone troca de roupa — fundo vermelho, desenho branco. Com
   transição, nunca de um golpe. */
.home-main-products.hp-car .main-product-info-action,
.home-main-products.hp-car .main-product-icon,
.home-main-products.hp-car .main-product-icon:before {
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.home-main-products.hp-car .main-product-click:hover .main-product-info-action,
.home-main-products.hp-car .main-product-click:focus-visible .main-product-info-action {
  background: #00acc8; color: #fff;
}
.home-main-products.hp-car .main-product-click:hover .main-product-icon,
.home-main-products.hp-car .main-product-click:focus-visible .main-product-icon {
  transition: background-color .25s ease, color .25s ease, box-shadow .3s ease,
              transform .28s ease;
  background: #d60037;
  box-shadow: 0 14px 28px -12px rgba(214, 0, 55, .7);
}
.home-main-products.hp-car .main-product-click:hover .main-product-icon:before,
.home-main-products.hp-car .main-product-click:focus-visible .main-product-icon:before {
  color: #fff;
}

/* A BOLHA CRESCE E A FOTOGRAFIA APROXIMA-SE (dono, 20/09/2026). O
   `translateX(-50%)` tem de ficar em todos os estados — é ele que segura
   a bolha no meio do cartão; sem isso, ao passar o rato ela saltava para
   a direita. */

.home-main-products.hp-car .box-home-img img {
  transform-origin: center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), filter .5s ease, opacity .3s ease;
}
.home-main-products.hp-car .main-product-click:hover .box-home-img img,
.home-main-products.hp-car .main-product-click:focus-visible .box-home-img img {
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  transform: translate(-50%, -50%) scale(1.12);
  opacity: 1;
}
.home-main-products.hp-car .main-product-icon {
  transition: background-color .25s ease, color .25s ease, box-shadow .3s ease,
              transform .28s ease;
}
.home-main-products.hp-car .main-product-click:hover .main-product-icon,
.home-main-products.hp-car .main-product-click:focus-visible .main-product-icon {
  transition: background-color .25s ease, color .25s ease, box-shadow .3s ease,
              transform .28s ease;
  transform: translateX(-50%) scale(1.12);
}

/* MOVIMENTO REDUZIDO: não se desliga nada — fica mais pequeno e mais
   calmo, que é a regra da casa. */
@media (prefers-reduced-motion: reduce) {
  .home-main-products.hp-car .main-product-icon {
    transition: background-color .3s ease, color .3s ease, box-shadow .35s ease, transform .4s ease;
  }
  .home-main-products.hp-car .main-product-click:hover .main-product-icon,
  .home-main-products.hp-car .main-product-click:focus-visible .main-product-icon {
    transition: background-color .3s ease, color .3s ease, box-shadow .35s ease, transform .4s ease;
    transform: translateX(-50%) scale(1.1);
  }
  .home-main-products.hp-car .main-product-click:hover .box-home-img img,
  .home-main-products.hp-car .main-product-click:focus-visible .box-home-img img {
    transition: transform .55s ease, opacity .3s ease;
    transform: translate(-50%, -50%) scale(1.08);
  }
}
/* O TÍTULO NUMA LINHA SÓ, ao centro (dono, 20/09/2026). Medido: com 17px
   o nome mais comprido — «Revenda de Hospedagem» — pedia 231px numa
   coluna de 229 e caía para a segunda linha; a 16px pede 217 e cabe com
   folga. O `nowrap` é o cinto de segurança para um nome novo mais longo:
   corta com reticências em vez de partir o cartão. */
.home-main-products.hp-car .main-product-name { display: block; text-align: center; }
.home-main-products.hp-car .main-product-name h3 {
  display: block; width: 100%;
  font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* O PREÇO DA MESMA COR EM TODOS OS CARTÕES (dono, 20/09/2026). O tema
   pinta-o por uma classe de cada produto antigo — três saíam em azul e
   sete em cinzento. */
.home-main-products.hp-car .main-product-info-price-main { color: #d60037; }

/* AS FOTOGRAFIAS que o dono escolheu (as mesmas do painel «Soluções»):
   todas cortadas à mesma altura, para os oito cartões terem o mesmo
   feitio — as ilustrações do tema não cobriam domínios nem certificados
   e esses dois destoavam. */
/* A RISCA DE CIMA DA IMAGEM É VERMELHA em todos (dono, 20/09/2026). O
   tema deixa a cor por herdar e pinta-a por uma classe de cada produto
   antigo — saíam três azuis e sete cinzentas. */
.home-main-products.hp-car .box-home-img,
.home-main-products.hp-car .box-home .box-home-img-wrap .box-home-img {
  padding: 0; border-top: 3px solid #d60037;
  border-radius: 12px 12px 0 0; overflow: hidden;
  min-width: 0; width: 100%; margin-left: 0; margin-right: 0;
}
.home-main-products.hp-car .box-home-img img {
  display: block; width: 100%; height: 168px; max-height: none;
  object-fit: cover; object-position: center;
}

/* ---- o título da secção, à vista em qualquer ecrã ---- */
.home-main-products.hp-car .main-product-title {
  display: block;
  padding: 0 16px;
  margin: 44px 0 26px;
  font-size: clamp(21px, 3.4vw, 36px);
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ---- AS SETAS AO LADO DOS PRODUTOS (dono, 20/09/2026) ---- */
.home-main-products.hp-car .hp-caixa { position: relative; }
.home-main-products.hp-car .hp-caixa::after,
.home-main-products.hp-car .hp-caixa::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 30px;
  pointer-events: none; z-index: 2;
}
.home-main-products.hp-car .hp-caixa::after {
  right: 0;
  background: linear-gradient(to right, rgba(243, 244, 245, 0) 0%, rgba(243, 244, 245, 1) 100%);
}
.home-main-products.hp-car .hp-caixa::before {
  left: 0;
  background: linear-gradient(to left, rgba(243, 244, 245, 0) 0%, rgba(243, 244, 245, 1) 100%);
}
.home-main-products.hp-car .hp-seta {
  position: absolute; top: 96px; z-index: 4;         /* à altura da fotografia */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  box-shadow: 0 10px 24px -10px rgba(31, 40, 53, .45);
  border: 1px solid #16202c; border-radius: 999px;
  background: #16202c; color: #fff; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.home-main-products.hp-car .hp-seta:hover:not([disabled]),
.home-main-products.hp-car .hp-seta:focus-visible:not([disabled]) {
  background: #b30030; border-color: #b30030; color: #fff; outline: none;
}
/* nunca há setas desligadas: o carrossel dá a volta (dono, 20/09/2026) */

.home-main-products.hp-car .hp-seta-ant { left: -22px; }
.home-main-products.hp-car .hp-seta-seg { right: -22px; }



@media only screen and (max-width: 991px) {
  /* dois inteiros e o terceiro a espreitar */
  .home-main-products.hp-car .main-product { flex-basis: calc((100% - 72px) / 2); }
  /* sem espaço fora da caixa, as setas entram por cima das pontas */
  .home-main-products.hp-car .hp-seta-ant { left: 2px; }
  .home-main-products.hp-car .hp-seta-seg { right: 2px; }
}
@media only screen and (max-width: 767px) {
  .home-main-products.hp-car .main-products { gap: 14px; }
  .home-main-products.hp-car .main-product { flex-basis: 86%; }
}

/* OS CARTÕES QUE CHEGAM APARECEM (dono, 20/09/2026: «ao clicar em next ou
   prev eles devem aparecer com animação»): entram um a seguir ao outro, do
   lado de onde vieram. O deslize do trilho é o movimento; isto é o
   aparecer. */
@keyframes hp-entra-dir {
  from { opacity: .2; transform: translateX(34px) translateY(10px) scale(.96); }
  60%  { opacity: 1; }
  to   { opacity: 1;  transform: none; }
}
@keyframes hp-entra-esq {
  from { opacity: .2; transform: translateX(-34px) translateY(10px) scale(.96); }
  60%  { opacity: 1; }
  to   { opacity: 1;  transform: none; }
}
@keyframes hp-suave { from { opacity: .3; } to { opacity: 1; } }
.home-main-products.hp-car .main-product.hp-entra {
  animation: hp-entra-dir 460ms cubic-bezier(.22, .68, .28, 1) both;
  animation-delay: calc(var(--hp-i, 0) * 65ms);
  will-change: transform, opacity;
}
.home-main-products.hp-car .main-product.hp-entra.hp-de-tras {
  animation-name: hp-entra-esq;
}

/* MOVIMENTO REDUZIDO: o deslize e o aparecer FICAM, só mais calmos — é a
   regra da casa (quem tem esta preferência deixava de perceber que a
   lista andou). */
@media (prefers-reduced-motion: reduce) {
  .home-main-products.hp-car .hp-seta { transition-duration: .12s; }
  .home-main-products.hp-car .main-product.hp-entra,
  .home-main-products.hp-car .main-product.hp-entra.hp-de-tras {
    animation-name: hp-suave; animation-duration: 420ms;
    animation-delay: calc(var(--hp-i, 0) * 45ms);
  }
}