/* ===== Cross-links entre os produtos da SepnIA Suite =====
   Bloco que vai no fim de cada LP (antes do rodapé), mostrando os produtos irmãos.
   AUTOCONTIDO de propósito: cada LP tem a sua paleta (--primary é verde no ZapnIA,
   laranja no SendnIA, roxo no LinknIA), então aqui nada depende das variáveis delas.
   A cor de cada card vem inline, via --c/--c2 no próprio elemento. */

.sxl {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 66px 20px;
    font-family: 'Poppins', 'Inter', sans-serif;
}
.sxl-inner { max-width: 920px; margin: 0 auto; text-align: center; }

.sxl-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #0056b3; background: #e8f1fb;
    padding: 7px 16px; border-radius: 50px; margin-bottom: 16px;
}
.sxl h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 700; color: #0f172a;
    margin: 0 0 8px; line-height: 1.25;
}
.sxl-sub { font-size: 15px; color: #64748b; margin: 0 0 34px; }

.sxl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }

.sxl-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
    padding: 18px 20px; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sxl-card:hover {
    transform: translateY(-3px);
    border-color: var(--c);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .09);
}
.sxl-ico {
    width: 48px; height: 48px; min-width: 48px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
    background: linear-gradient(135deg, var(--c), var(--c2));
}
.sxl-txt { display: flex; flex-direction: column; min-width: 0; }
.sxl-txt b { font-size: 16.5px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.sxl-txt b em { font-style: normal; color: var(--c); }
.sxl-txt small { font-size: 13px; color: #64748b; margin-top: 3px; }
.sxl-go { margin-left: auto; color: #cbd5e1; font-size: 14px; transition: color .2s, transform .2s; }
.sxl-card:hover .sxl-go { color: var(--c); transform: translateX(3px); }

.sxl-all {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 30px;
    font-size: 14.5px; font-weight: 600; color: #0056b3; text-decoration: none;
}
.sxl-all:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .sxl { padding: 48px 16px; }
    .sxl-grid { grid-template-columns: 1fr; }
}

/* Link discreto de volta à Suite, na nav das LPs.
   !important porque cada LP estiliza `nav a` com a cor do próprio produto — aqui
   queremos que ele fique neutro e secundário, sem competir com o CTA. */
.suite-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    white-space: nowrap;
}
.suite-nav-link:hover { color: #0056b3 !important; }
.suite-nav-link i { font-size: 11px; }

/* ===== Header das LPs: respiro e colapso =====================================
   O link da Suite virou um 5º item na nav. Na LP do ZapnIA — a mais carregada de
   todas (4 âncoras + seletor de idioma + 2 botões) — ele zerou a folga do
   .header-inner, que distribui o espaço com space-between. Medido: o logo
   terminava em 226px e a nav começava em 226px. Encostados.

   1) Aperta o gap da nav e garante um respiro MÍNIMO entre logo / nav / CTAs,
      para o logo nunca mais colar no primeiro item.
   2) Colapsa a nav no hambúrguer a 1150px, não a 768px. Abaixo disso o header do
      ZapnIA simplesmente não cabe — e isso já era verdade ANTES do link da Suite:
      logo(144) + nav(482) + CTAs(338) = 964px não entram nos 860px úteis de um
      viewport de 900px. Era um bug de responsivo pré-existente, só não aparecia
      porque ninguém tinha olhado essa faixa.

   Por que 1150 e não 1100: em 1100px o header do ZapnIA tem 43px de folga, mas o
   `gap: 24px` de cada lado exige 48px — estouraria por 5px. Em 1150 sobram 93px. */
.header-inner { gap: 24px; }
#header nav { gap: 24px; }

@media (max-width: 1150px) {
    #header nav { display: none; }
    #header .header-cta { display: none; }
    #header .mobile-menu-btn { display: block; }
}