/* ================================================================
   CETRIX ADDENDUM 3 — Logos SVG Nexus en tarjetas, dropdown y footer
   2026-06-21
   ================================================================ */

/* ── Logo horizontal en tarjetas SaaS ───────────────────────────── */
.saas-product-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 180px;
    margin-bottom: var(--space-1);
}

/* Alineación del header de tarjeta con logo SVG */
.saas-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.saas-card-header > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}
/* Oculta el h3 si queda en el DOM por compatibilidad */
.saas-card-header .saas-card-title { display: none; }

/* ── Ícono cuadrado en tarjeta y dropdown ────────────────────────── */
.saas-card-icon img,
.nav-dropdown-product-icon {
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
}

/* Ícono en dropdown navbar */
.nav-dropdown-product-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

/* ── Logos en footer ──────────────────────────────────────────────── */
.footer-link--logo {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) 0;
}
.footer-product-logo {
    display: block;
    height: 26px;
    width: auto;
    max-width: 120px;
    /* Logo de color oscuro → invertir para fondo oscuro del footer */
    filter: brightness(0) invert(1) opacity(0.7);
    transition: filter var(--transition-fast);
}
.footer-link--logo:hover .footer-product-logo,
.footer-link--logo:focus .footer-product-logo {
    filter: brightness(0) invert(1) opacity(1);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .saas-product-logo { height: 32px; }
    .saas-card-header  { gap: var(--space-2); }
}