/* =====================================================================
   O CARROSSEL DOS CARTÕES DE EXTENSÃO — 26/09/2026.

   Ordem do dono: «devem ter todos os tlds do país, mostre 3, mas com next
   e prev ao lado», «as outras extensões devem espreitar», «deve ser
   infinito», «é melhor aplicar o mesmo efeito e detalhes do next e prev
   aplicado em planos».

   ISTO É SÓ A ROUPA. O movimento vem do `home-produtos.js`, o mesmo motor
   dos produtos e dos planos da página inicial — procura `[data-hp-car]`,
   `.hp-trilho` e `.hp-seta[data-dir]` onde quer que estejam.

   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. É a mesma conta do `home-planos.css`,
   escrita da mesma maneira de propósito: quem mudar uma tem de ver a outra.
   ===================================================================== */
#domaintldoffers .hp-caixa { position: relative; }

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

#domaintldoffers .hp-trilho > [class*="col-"] {
  flex: 0 0 calc((100% - 144px) / 3); width: auto; max-width: none; float: none;
  padding: 0; scroll-snap-align: start; display: flex;
}
#domaintldoffers .hp-trilho > [class*="col-"] > .thumbnail { width: 100%; }
@media (max-width: 991px) {
  #domaintldoffers .hp-trilho > [class*="col-"] { flex-basis: calc((100% - 64px) / 2); }
}
@media (max-width: 720px) {
  #domaintldoffers .hp-trilho > [class*="col-"] { flex-basis: 82%; }
}

/* AS SETAS SÃO AS DOS PLANOS: mesma medida, mesma sombra, mesmo hover. */
#domaintldoffers .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 #1f2835; border-radius: 999px;
  background: #1f2835; 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;
}
#domaintldoffers .hp-seta:hover, #domaintldoffers .hp-seta:focus-visible {
  background: #d60037; border-color: #d60037; color: #fff; outline: none;
}
#domaintldoffers .hp-seta-ant { left: -22px; }
#domaintldoffers .hp-seta-seg { right: -22px; }
@media (max-width: 1280px) {
  #domaintldoffers .hp-seta-ant { left: 2px; }
  #domaintldoffers .hp-seta-seg { right: 2px; }
}

/* QUEM ESPREITA DESVANECE-SE, e não leva um véu por cima.

   A primeira versão copiava os produtos da página inicial: duas faixas em
   gradiente sobre as bordas, na cor do fundo. Ali resulta porque os
   cartões são claros; AQUI são azul-escuros, e um gradiente branco por
   cima de um cartão escuro não o apaga -- deixa uma barra pesada com um
   degradê em cima. O dono: «os produtos que estão a espreitar estão muito
   carregados».

   Com `mask-image` não se pinta nada: recorta-se. As pontas do trilho
   ficam transparentes e deixam ver o fundo da secção, seja ele qual for
   -- e é por isso que isto serve tanto a página do gerador (fundo
   cinzento) como a de registo e a de whois (fundo branco), sem cada uma
   precisar de saber a sua cor. */
#domaintldoffers .hp-trilho {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px,
    #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 56px,
    #000 calc(100% - 56px), transparent 100%);
}

/* O `wow fadeInLeft` do tema anima cada cartão à entrada no ecrã. Dentro
   de um trilho que rola de lado isso deixa os que estão fora da vista em
   `opacity: 0` para sempre — entram no carrossel e não se veem. */
#domaintldoffers .hp-trilho > .wow { visibility: visible !important; animation: none !important; }