/* =============================================================================
   ufl-ui.css — uniformização da identidade  (27/10/2026)
   -----------------------------------------------------------------------------
   Auditoria: o site usava TRÊS famílias de letra ao mesmo tempo — Bebas Neue
   (títulos), Inter (texto) e system-ui (blocos acrescentados por mim, culpa
   minha). Daí a sensação de desconexo.

   Regra única a partir de agora:
     · Bebas Neue  → títulos, etiquetas, botões e PREÇOS (a voz da marca)
     · Inter       → tudo o que é para ler (parágrafos, listas, legendas)
     · system-ui   → não se usa em lado nenhum

   Carrega-se depois de todos os outros CSS.
   ========================================================================== */

/* =========================================================
   1. TIPOGRAFIA — acabar com o system-ui
   ========================================================= */
.ufl-aviso-18,
.ufl-texto,
.ufl-comparar,
.ufl-garantias,
.ufl-pagamentos,
.video-card .video-title,
.video-card .video-meta .views-badge {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* preços e etiquetas passam para a letra da marca */
.ufl-etiqueta,
.ufl-btn,
.ufl-fita {
  font-family: "Bebas Neue", sans-serif !important;
}

/* =========================================================
   2. ÍCONES DAS FORMAS DE PAGAMENTO
   ========================================================= */
.ufl-pagamentos li {
  gap: 7px;
}
.ufl-pagamentos li i {
  font-size: 17px;
  line-height: 1;
  color: #c9c9d4;
}
.ufl-pagamentos .ufl-rapido i { color: #fff; }
.ufl-pagamentos .ufl-cartoes i { font-size: 19px; }

/* =========================================================
   3. PÁGINA DE PACOTES — era aqui que estava pior
   ------------------------------------------------------
   a) A palavra gigante "PLANS" no fundo passava POR CIMA do primeiro cartão
      no telemóvel. Lia-se como página partida. Fica só a partir do desktop.
   b) Os cartões estavam numa faixa de rolagem horizontal: via-se um cartão e
      meio, com o segundo cortado a meio do ecrã. Passam a empilhar.
   c) O preço estava em Inter. O preço é o elemento mais importante da página
      — passa para Bebas Neue, a letra da marca.
   d) Botão "Get Started" era um contorno com texto vermelho: fraco para a
      ação principal. Passa a cheio.
   ========================================================= */

/* a) marca d'água só em ecrã grande */
.huge-bg-text { display: none !important; }
@media (min-width: 1024px) {
  .huge-bg-text { display: block !important; opacity: .05 !important; }
}

/* b) cartões empilhados no telemóvel, grelha em ecrã grande */
.pricing-cards-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  overflow: visible !important;
  padding: 0 !important;
}
@media (min-width: 680px) {
  .pricing-cards-container { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (min-width: 1100px) {
  .pricing-cards-container { grid-template-columns: repeat(4, 1fr) !important; }
}
/* as setas do carrossel deixam de fazer sentido */
.pricing-nav-btn { display: none !important; }

/* cartão mais compacto e com cantos coerentes com os cards da grelha */
.pricing-card {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 22px 20px 24px !important;
  border-radius: 16px !important;
  background: #15151a !important;
  border: 1px solid #232330 !important;
}
.pricing-card.featured {
  border-color: rgba(229, 9, 20, .55) !important;
  box-shadow: 0 10px 34px rgba(229, 9, 20, .14) !important;
}

/* c) etiqueta e preço na letra da marca */
.pricing-card .plan-label {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  color: var(--text-secondary, #9a9aa5) !important;
}
.pricing-card .price {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 52px !important;
  line-height: .95 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}
.pricing-card .billing-period {
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  color: var(--text-muted, #6e6e7a) !important;
}
.pricing-card .price-wrapper {
  display: flex; align-items: baseline; gap: 7px; margin-top: 2px;
}

/* d) botão principal a cheio */
.pricing-card .cta-button,
.pricing-card .cta-button.outline {
  display: block;
  padding: 14px 20px !important;
  border-radius: 999px !important;
  background: var(--brand-red, #e50914) !important;
  border: none !important;
  color: #fff !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 18px !important;
  letter-spacing: .8px;
  text-align: center;
  transition: background .15s ease, transform .15s ease;
}
.pricing-card .cta-button:hover { background: var(--brand-red-hover, #ff1f2c) !important; transform: translateY(-1px); }

/* lista de vantagens mais apertada e legível */
.pricing-card .features {
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
.pricing-card .features li {
  font-family: "Inter", sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--text-secondary, #9a9aa5) !important;
  margin-bottom: 9px !important;
}
.pricing-card .plan-divider { margin: 16px 0 0 !important; opacity: .5; }

/* cabeçalho da secção: uma ênfase só, não duas */
.pricing-header .social-proof {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--text-secondary, #9a9aa5) !important;
  max-width: 46ch; margin-left: auto; margin-right: auto;
}
.pricing-header .cta-callout {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(26px, 6vw, 40px) !important;
  letter-spacing: .5px !important;
  color: #fff !important;
  margin-top: 10px !important;
}

/* =========================================================
   4. FORMAS DE PAGAMENTO NA PÁGINA DE PACOTES
   ========================================================= */
.ufl-pag-precos {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 22px 0 0; padding: 0; list-style: none;
  color: var(--text-muted, #6e6e7a);
  font-family: "Inter", sans-serif; font-size: 12.5px;
}
.ufl-pag-precos i { font-size: 22px; color: #c9c9d4; }
.ufl-pag-precos li { display: inline-flex; align-items: center; gap: 7px; }

/* =========================================================
   5. ACERTOS FINAIS NA PÁGINA DE PACOTES
   ========================================================= */

/* o invólucro reservava altura para a marca d'água já escondida */
.pricing-cards-wrapper {
  padding: 0 !important;
  min-height: 0 !important;
}

/* cartões com altura própria: não esticam para igualar o mais alto,
   o que deixava um vazio grande no fim dos mais curtos */
.pricing-card {
  height: auto !important;
  align-self: start;
}
.pricing-card .features li:last-child { margin-bottom: 0 !important; }

/* a etiqueta era âmbar, a única cor fora da identidade do site */
.pricing-card .card-tag {
  font-family: "Bebas Neue", sans-serif !important;
  letter-spacing: 1.2px !important;
  font-size: 12px !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  text-transform: uppercase;
}
.pricing-card .card-tag.tag-recommended {
  background: rgba(229, 9, 20, .15) !important;
  border: 1px solid rgba(229, 9, 20, .5) !important;
  color: #ff5560 !important;
}

/* --- as duas causas medidas do vazio, corrigidas na raiz ---
   O cartao tinha min-height: 520px fixo e a lista de vantagens crescia para
   preencher esse espaco: daí o buraco por baixo do último item nos pacotes
   com menos linhas. E o invólucro tinha margin-top: 60px, reservado para a
   marca d'água que agora só aparece em ecrã grande. */
.pricing-card { min-height: 0 !important; }
.pricing-card .features { flex: none !important; }
.pricing-cards-wrapper { margin-top: 10px !important; }
@media (min-width: 1024px) {
  .pricing-cards-wrapper { margin-top: 56px !important; }
}