/* --- 1. CONTENEDOR PRINCIPAL (El Enlace o Div) --- */
.misato-logo-wrapper {
    display: inline-flex; /* Se ajusta al contenido */
    position: relative;
    text-decoration: none;
    
    /* Importante para que no haya espacios extra debajo de la imagen */
    line-height: 0;
    
    /* El tamaño lo definen los controles de Elementor o la imagen por defecto */
    width: auto;
    height: auto;
    
    /* Centrado interno */
    align-items: center;
    justify-content: center;
    
    /* Limpieza y Seguridad */
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent !important; /* Evita fondos heredados */
    
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer; /* Mano si es enlace */
}

/* Si no es enlace (div), quitamos la mano */
div.misato-logo-wrapper {
    cursor: default;
}

/* --- 2. CAPA PROTECTORA (Bloquea click derecho en img/video) --- */
.misato-logo-protector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20; /* Encima de todo */
    background: transparent;
    /* No ponemos pointer-events: none para que ESTA capa reciba el click del enlace */
}

/* --- 3. IMAGEN DE RESPALDO (Define el tamaño físico) --- */
.misato-fallback-img {
    display: block;
    width: 100%; 
    height: 100%; 
    
    /* Mantiene proporción y define el espacio que ocupa el widget */
    object-fit: contain;
    object-position: center;
    
    position: relative; 
    z-index: 5;
    
    /* Transición suave al desaparecer */
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

/* --- 4. CONTENEDOR DE ANIMACIÓN (Flota encima) --- */
.misato-anim-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 10; /* Encima de la imagen */
    
    opacity: 0; /* Invisible hasta que cargue */
    transition: opacity 0.3s ease-in-out;
    
    pointer-events: none; /* Dejamos que el click pase a través */
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Ajuste forzado para SVG (Lottie) y Video */
.misato-anim-container svg,
.misato-anim-container video,
.misato-video-element {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
    margin: 0 !important;
}

/* --- 5. ESTADOS (Controlados por JS) --- */

/* Cuando JS agrega .misato-loaded al wrapper: */

/* Opción A: Ocultar imagen (Si la animación es opaca y reemplaza al logo) */
.misato-loaded .misato-fallback-img {
    opacity: 0;
}

/* Mostrar la animación */
.misato-loaded .misato-anim-container {
    opacity: 1;
}

/* --- 6. INTEGRACIÓN CON ELEMENTOR --- */

/* Aseguramos que el contenedor de Elementor permita la alineación flex */
.elementor-widget-misato_animated_logo .elementor-widget-container {
    display: flex;
    width: 100%;
    /* justify-content se maneja desde el PHP con el control de Alineación */
}