/* Identidad compartida: las pantallas conservan su distribución, pero ninguna
   de sus hojas locales debe cambiar las proporciones del logo de inicio. */
@font-face {
    font-family: 'ComPRO Brand';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

.compro-brand {
    --compro-logo-size: 23px;
    --compro-badge-size: 16px;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: 'ComPRO Brand', system-ui, -apple-system, sans-serif !important;
    font-size: var(--compro-logo-size) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: -1.1px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
}
.compro-brand > .compro-brand-com,
.compro-brand > .compro-brand-pro {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}
.compro-brand > .compro-brand-com {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: var(--compro-logo-size) !important;
    letter-spacing: -1.1px !important;
}
.compro-brand > .compro-brand-pro {
    margin: 0 0 0 1px !important;
    padding: 1px 5px !important;
    border-radius: 7px !important;
    background: #0066ff !important;
    color: #fff !important;
    font-size: var(--compro-badge-size) !important;
    letter-spacing: -.5px !important;
}

/* El mismo logo necesita una superficie clara sobre los fondos oscuros. */
.footer-logo .compro-brand,
:root[data-theme="dark"] .marca .compro-brand {
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: #fff !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .marca .compro-brand {
        padding: 4px 8px !important;
        border-radius: 8px !important;
        background: #fff !important;
    }
}
@media (max-width: 767px) {
    .compro-brand { --compro-logo-size: 21px; --compro-badge-size: 15px; }
}
@media (max-width: 480px) {
    .compro-brand { --compro-logo-size: 20px; }
}