/* Logo del encabezado: el video se dibuja en un canvas y se le quita el fondo (así no se ve un rectángulo en ningún celular).
   Si el video no puede reproducirse, se muestra la imagen transparente del logo con una entrada suave. */
.brand-anim{position:relative;display:block;height:46px;line-height:0}
.brand-logo,.brand-canvas{display:block;height:46px;width:auto}
.brand-canvas{position:absolute;left:0;top:0}
.brand-fuente{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.brand-anim.esperando .brand-logo{opacity:0}
.brand-anim.con-video .brand-logo{opacity:0}
@media (max-width:560px){.brand-anim,.brand-logo,.brand-canvas{height:38px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes revelarLogo{from{clip-path:inset(0 100% 0 0);opacity:.15}to{clip-path:inset(0 0 0 0);opacity:1}}
  .brand-anim.sin-video .brand-logo{animation:revelarLogo 1.1s cubic-bezier(.2,.7,.2,1) .1s both}
}