/* Cargar después de online.css. Requiere el filtro SVG incluido en la vista. */
.royal-hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.royal-dogs {
    width: min(100%, 340px);
    background: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    mix-blend-mode: normal !important;
}

.royal-dogs-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent !important;
    /* Primero invierte el original; luego convierte negro a alfa 0 y blanco a alfa 1. */
    filter: grayscale(1) invert(1) url("#royal-white-transparent") !important;
    mix-blend-mode: normal !important;
}

.royal-logo-orbit {
    background: transparent !important;
}

.royal-logo-orbit img {
    background: transparent !important;
    /* El contraste elimina también el fondo casi negro del archivo original. */
    filter: grayscale(1) contrast(2) url("#royal-white-transparent") !important;
    mix-blend-mode: normal !important;
}

@media (max-width: 768px) {
    .royal-dogs {
        width: min(100%, 280px);
        margin: 24px auto 0;
    }
}